概述 jQuery.post( url [, data ] [, success ] [, dataType ] )
返回值:XMLHttpRequest
描述:使用一个HTTP POST 请求从服务器加载数据。
dataType
选项,那么这个success
选项是必须的,
但这种情况下你可以使用null
。
url
以外的所有选项属性都是可选的。任何默认选项可以用$.ajaxSetup()进行设置。所有选项设置的完整列表,请参阅jQuery.ajax( settings )。
type(类型)选项将自动设置为POST
。
这是一个 Ajax 函数的简写形式,这相当于:
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
success
回调函数会传入返回的数据,是根据MIME类型的响应,它可能返回的数据类型包括XML根节点, 字符串, JavaScript 文件, 或者 JSON 对象。 同时还会传入描述响应状态的字符串。
从 jQuery 1.5开始,success
回调函数还传递一个“jqXHR”对象 ( 在 jQuery 1.4中 ,它传递的是XMLHttpRequest
对象)。
大多数实现将指定一个成功的处理函数:
$.post('ajax/test.html', function(data) {
$('.result').html(data);
});
这个示例所请求的全部HTML代码片段插入到页面中。
用 POST
获取的页面是从来不会被缓存, 所以这些请求中的 cache
和 ifModified
选项在 jQuery.ajaxSetup()
是无效的。
从jQuery 1.5开始,所有jQuery的Ajax方法都返回一个XMLHTTPRequest
对象的超集。这个通过$.post()
方法返回的jQuery XHR对象,或“jqXHR”,实现了 Promise 接口,使它拥有 Promise 的所有属性,方法和行为。jqXHR.done()
(表示成功), jqXHR.fail() (表示错误)
, 和 jqXHR.always()
(表示完成, 无论是成功或错误;在jQuery 1.6 中添加) 方法接受一个函数参数,用来请求终止时被调用。关于这个函数接收参数的详细信息,请参阅 jqXHR Object 文档中的 $.ajax() 章节。
Promise 接口也允许jQuery的Ajax方法, 包括 $.get()
, 在一个单独的请求中关联到 .done()
, .fail()
, 和 .always()
回调函数, 甚至允许你在请求已经结束后,指派回调函数。如果该请求已经完成,则回调函数会被立刻调用。
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.post("example.php", function() {
alert("success");
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });
// perform other work here ...
// Set another completion function for the request above
jqxhr.complete(function(){ alert("second complete"); });
jqXHR.success()
, jqXHR.error()
, 和 jqXHR.complete()
回调方法 在jQuery 1.5中引进, 在jQuery 1.8中不赞成使用,已经过时。他们最终将被取消(移除),你的代码应该为次做好准备, 从jQuery 3.0开始被删除,你可以使用 jqXHR.done()
, jqXHR.fail()
, 和 jqXHR.always()
代替.
jqXHR
对象的.error()
方法也可用于错误处理。
示例
请求 test.php 网页,忽略返回值:
$.post("test.php");
请求 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");
jQuery 1.12 中 jQuery.post支持对象参数,具体的参数可以参考 $.ajax()
:
jQuery.post({
url: "/example" });
用ajax传递一个表单并把结果在一个div中
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <form action="/" id="searchForm"> <input type="text" name="s" placeholder="Search..." /> <input type="submit" value="Search" /> </form> <!-- the result of the search will be rendered inside this div --> <div id="result"></div> <script> /* attach a submit handler to the form */ $("#searchForm").submit(function(event) { /* stop form from submitting normally */ event.preventDefault(); /* get some values from elements on the page: */ var $form = $( this ), term = $form.find( 'input[name="s"]' ).val(), url = $form.attr( 'action' ); /* Send the data using post and put the results in a div */ $.post( url, { s: term }, function( data ) { var content = $( data ).find( '#content' ); $( "#result" ).empty().append( content ); } ); }); </script> </body> </html>