jQuery.post()

jQuery.post( url [, data ] [, success ] [, dataType ] )返回类型:jqXHR

描述:利用HTTP POST请求从服务器载入数据。

这是一个简写的Ajax函数,它等同于:

1
2
3
4
5
6
7
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});

success回调函数传入了返回的data,它将是一个XML根元素或文本字符串,取决于响应的MIME。它也传入了响应的文本状态。

As of jQuery 1.5, the success callback function is also passed a "jqXHR" object (in jQuery 1.4, it was passed the XMLHttpRequest object).

更多的实现器将指定一个成功的处理函数:

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

此示例取回了请求的HTML片段,并把它插入到网页上。

POST取回的网页永远不会被缓存,所以jQuery.ajaxSetup()中的cache选项和ifModified选项在这些请求上没有效果。

The jqXHR Object

自从jQuery1.5以来,所有的jQuery的Ajax方法都返回XMLHTTPRequest对象的一个超级。$.get()方法返回的此jQuery XHR对象,或“jqXHR”,实现了应答对象接口,给它所有应答对象的属性、方法和行为(请参阅Deferred object以进一步了解信息)。jqXHR.done()方法(针对success)、jqXHR.fail()方法(针对error)和jqXHR.always()方法(针对completion,无论是success还是error,在jQuery 1.6中添加)取用了一个函数参数,在请求终结时调用它们。欲进一步了解此函数接受的参数,请参阅$.ajax()文档的jqXHR 对象部分。

应答对象接口也允许jQuery的Ajax方法,包括$.get(),在一个请求上连缀多个.done().fail().always()回调函数,甚至在请求可能已经结事后再设置这些回调函数。如果请求已经结束,会立即引发回调函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.post( "example.php", function() {
alert( "success" );
})
.done(function() {
alert( "second success" );
})
.fail(function() {
alert( "error" );
})
.always(function() {
alert( "finished" );
});
// Perform other work here ...
// Set another completion function for the request above
jqxhr.always(function() {
alert( "second finished" );
});

淘汰通知

自从jQuery 3.0以来,已经删除了jqXHR.success()jqXHR.error()jqXHR.complete()回调函数方法。你可以使用jqXHR.done()jqXHR.fail()jqXHR.always()方法来代替。

补充说明:

  • 由于浏览器安全性限制,大多数“Aajx”请求都服从同源策略;请求不能从不同的域名、不同的子域、端口或协议成功地检索到数据。
  • 如果请求利用jQuery.post()方法返回一个错误代码,它将静默地失败,除非脚本还将调用全局.ajaxError()方法。作为替代,自从jQuery 1.5以来,由jQuery.post()方法返回的jqXHR对象的.error()方法也可以用于错误处理。

示例:

请求test.php页面,但是忽略返回的结果。

1
$.post( "test.php" );

请求test.php,把一些额外的数据随同发送(与此同时,依然忽略返回的结果)。

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

把数据的数组传递给服务器(与此同时依然忽略返回的结果)。

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

使用Ajax请求发送表单数据。

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

提醒来自请求的test.php的结果(HTML或XML,取决于它返回了什么)。

1
2
3
$.post( "test.php", function( data ) {
alert( "Data Loaded: " + data );
});

提醒来自请求的test.php的结果,带有一些额外的过载数据(HTML或XML,取决于它返回了什么)。

1
2
3
4
$.post( "test.php", { name: "John", time: "2pm" })
.done(function( data ) {
alert( "Data Loaded: " + data );
});

Post发送到test.php,并取得以json格式返回的内容(<?php echo json_encode(array("name"=>"John","time"=>"2pm")); ?>)。

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

使用Ajax Post发送一个表单,把结果放到<div>中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.post demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.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
var posting = $.post( url, { s: term } );
// Put the results in a div
posting.done(function( data ) {
var content = $( data ).find( "#content" );
$( "#result" ).empty().append( content );
});
});
</script>
</body>
</html>

演示: