jQuery学习笔记：jQuery Ajax 03：$.post()方法

jQuery Ajax：$.post()方法

 

主要参考：

《锋利的jQuery》单东林、张晓菲、魏然

www.3cschool.com.cn之《jQuery 参考手册 - Ajax》

 

搜集整理：sagahu@163.com

 

简单示例

 

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

 

$("#button"). keyup (function(){

  $.post("demo_ajax_post.asp",  {suggest:txt},  function(result){

    $("div").html(result);

  });

});

 

定义

 

post() 方法通过 HTTP POST 请求从服务器载入数据。。

 

这是一个简单的HTTP POST 请求功能以取代复杂 $.ajax() 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax()。

 

语法

 

$.post(url, data, callback, dataType)

 

参数	说明
url	必需。规定要将请求发送到哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
callback的语法： function(response, status, jqXHR)	可选。规定当载入成功时的回调函数（只有当Response的返回状态是success才调用该方法），自动将结果和状态传递给该方法。 回调函数参数：     response - 包含来自请求的结果数据。     status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror" 4种）。     jqXHR -对于 jQuery 1.4，才可以向 success 回调函数传递 XMLHttpRequest 对象；此前版本没有这个参数；而对于 jQuery 1.5，则是是 XMLHTTPRequest 对象的超集。
dataType	可选。规定预计的服务器端返回内容的格式，包括xml、html、script、json、text和_default。默认地，jQuery 将智能判断。
返回值	XMLHttpRequest

 

详细说明

 

该函数是简写的 Ajax 函数，等价于：

 

$.ajax({

  type: 'POST',

  url: url,

  data: data,

  success: success,

  dataType: dataType

});

 

根据响应的不同的 MIME 类型，传递给 success 回调函数的返回数据也有所不同，这些数据可以是 XML 根元素、文本字符串、JavaScript 文件或者 JSON 对象。也可向 success 回调函数传递响应的文本状态。

 

对于 jQuery 1.5，也可以向 success 回调函数传递 jqXHR 对象（jQuery 1.4 中传递的是 XMLHttpRequest 对象）。

 

大部分实现会规定一个 success 函数：

 

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

  $(".result").html(data);

});

 

本例读取被请求的 HTML 片段，并插入页面中。

 

通过 POST 读取的页面不被缓存，因此 jQuery.ajaxSetup() 中的 cache 和 ifModified 选项不会影响这些请求。

 

注释：由于浏览器安全方面的限制，大多数 "Ajax" 请求遵守同源策略；请求无法从不同的域、子域或协议成功地取回数据。

 

注释：如果由 jQuery.post() 发起的请求返回错误代码，那么不会有任何提示，除非脚本已调用了全局的 .ajaxError() 方法。或者对于 jQuery 1.5，jQuery.post() 返回的 jqXHR 对象的 .error() 方法也可以用于错误处理。

 

jqXHR 对象

 

对于 jQuery 1.5，所有 jQuery 的 AJAX 方法返回的是 XMLHTTPRequest 对象的超集。由 $.post() 返回的 jQuery XHR 对象或 "jqXHR,"实现了约定的接口，赋予其所有的属性、方法，以及约定的行为。出于对由 $.ajax() 使用的回调函数名称便利性和一致性的考虑，它提供了 .error(), .success() 以及 .complete() 方法。这些方法使用请求终止时调用的函数参数，该函数接受与对应命名的 $.ajax() 回调函数相同的参数。

 

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"); });

 

$.get()方法与$.post()方法比较

 

二者的语法结构与使用方式几乎相同，不过它们仍有以下的区别：

l         GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。当然，在AJAX请求中这种区别对用户是不可见的。

l         GET方式对传输的数据有大小限制（通常不能大于2KB），而使用POST方式传递的数据量要比GET方式大的多（理论上不受限制）。

l         GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史纪录中读取到这些数据，例如帐号和密码等。在某种情况下，GET方式会带来严重的安全问题，而POST方式相对来说就可以避免这些问题。

l         GET方式和POST方式传递的数据在服务器端的获取也不相同。在PHP中，GET方式的数据可以用$_get[]获取，而POST方式则可以用$_POST[]获取。两种方式都可以用$_REQUEST[]获取。

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

   alert("Data Loaded: " + data);

 });

 

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

 

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

   function(data){

     alert("Data Loaded: " + data);

   });

 

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

 

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

   function(data){

     process(data);

   }, "xml");

 

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

 

$.post("test.php", { "func": "getNameAndTime" },

   function(data){

     alert(data.name); // John

     console.log(data.time); //  2pm

   }, "json");