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 页面，并一起发送一些额外的数据（同时仍然忽略返回值）：

1	$.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' });