jQuery+ajax操作大全

jQuery+ajax操作大全

参数 描述

url 必需。规定把请求发送到哪个 URL。

data 可选。映射或字符串值。规定连同请求发送到服务器的数据。

success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。

dataType可选。规定预期的服务器响应的数据类型。

默认执行智能判断（xml、json、script 或 html）。

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType);

$.ajax({
  type:  'POST' ,
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

大部分实现会规定一个 success 函数：//该函数是简写的 Ajax 函数，等价于：

$.post( "ajax/test.html" ,  function (data) {
  $( ".result" ).html(data);
});

//jQuery 1.5 中的约定接口同样允许 jQuery 的 Ajax 方法，包括 $.post()，来链接同一请求的多个 .success()、.complete() 以及 .error() 回调函数，甚至会在请求也许已经完成后分配这些回调函数。

// 请求生成后立即分配处理程序，请记住该请求针对 jqxhr 对象

var  jqxhr = $.post( "example.php" ,  function () {
      alert( "success" );
    })
    .success( function () { alert( "second success" ); })
    .error( function () { alert( "error" ); })
    .complete( function () { alert( "complete" ); });
    // 为上面的请求设置另一个完成函数
    jqxhr.complete( function (){ alert( "second complete" ); });

$( "input" ).keyup( function (){
    txt=$( "input" ).val();
    $.post( "/jquery/gethint.asp" ,{suggest:txt}, function (result){
      $( "span" ).html(result);
    });
  });

//通过 AJAX POST 请求改变 div 元素的文本：

//例子 1

//请求 test.php 页面，并一起发送一些额外的数据（同时仍然忽略返回值）：

$.post( "test.php" , { name:  "John" , time:  "2pm"  } );

//例子 2

//向服务器传递数据数组（同时仍然忽略返回值）：

$.post("test.php", { 'choices[]': ["Jon", "Susan"] });

//使用 ajax 请求发送表单数据：///例子 3

$.post("test.php", $("#testform").serialize());

//输出来自请求页面 test.php 的结果（HTML 或 XML，取决于所返回的内容）：//例子 4

   $.post("test.php", function(data){

   alert( "Data Loaded: "  + data);
 });

//向页面 test.php 发送数据，并输出结果（HTML 或 XML，取决于所返回的内容）：//例子 5

    $.post("test.php", { name: "John", time: "2pm" },

   function (data){
     alert( "Data Loaded: "  + data);
   });

//获得 test.php 页面的内容，并存储为 XMLHttpResponse 对象，并通过 process() 这个 JavaScript 函数进行处理：//例子 6

$.post( "test.php" , { name:  "John" , time:  "2pm"  },
   function (data){
     process(data);
   },  "xml" );

//例子 7

//获得 test.php 页面返回的 json 格式的内容：

$.post( "test.php" , {  "func" :  "getNameAndTime"  },
   function (data){
     alert(data.name);  // John
     console.log(data.time);  //  2pm
   },  "json" );

$( "#province" ).change( function (){
    var  pid = $( "#province option:selected" ).val();
    var  href= '/common/ajax_scenic.php?action=city&pid=' +pid+ '&' +Math.random();
    var  params = {
        type: 'GET' ,
        url:href,
        dataType: 'text' ,
        success: function (data){
            jQuery( "#city" ).append(data);
        }
    };
    jQuery.ajax( params );
});

$.ajax({
    url: '/member/ajax.php' +Math.random(),
    dataType: 'text' ,
    data:encodeURI( 'action=edit_phone&uid=' +uid+ '&phone=' +phone),
    success: function (data){
        var  jsondata = eval( '(' +data+ ')' );
        if (jsondata.result== 'failure' ){
            alert(jsondata.content);
        }
        if (jsondata.result== 'success' ){
            $( '#comment_list' ).after(jsondata.html);
            alert( '评论成功！' );
        }
    }
});

var  params = {
    type: 'GET' ,
    url:href,
    dataType: 'text' ,
    success: function (data){
        jQuery( "#city" ).append(data);
        //$(".test").hide();
    }
};
jQuery.ajax( params );

//完整的AJAX代码

$.ajax({
    type: 'GET' ,
    url:href,
    dataType: 'text' ,
    data:encodeURI( 'id=1&uid=' +uid),
    beforeSend: function (){
        $( "#msg" ).html( "logining" );
    },
    success: function (data){
        jQuery( "#city" ).append(data);
    },
    complete:  function (XMLHttpRequest, textStatus){
        alert(XMLHttpRequest.responseText);alert(textStatus);
    },
    error:  function (){} ,
});

$( '#myform' ).ajaxForm({
    beforeSubmit:  checkForm,
    success:       complete,
    dataType:  'json'
});