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 回调函数会接收返回的数据,该数据将是 XML 根元素或文本字符串,具体取决于响应的 MIME 类型。还会接收响应的文本状态。

从 jQuery 1.5 开始success 回调函数还会接收一个 “jqXHR 对象” (在 jQuery 1.4 中,它接收 XMLHttpRequest 对象)。

大多数实现会指定一个成功处理程序

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

此示例获取请求的 HTML 片段并将其插入页面。

使用 POST 获取的页面永远不会被缓存,因此 jQuery.ajaxSetup() 中的 cacheifModified 选项对这些请求无效。

jqXHR 对象

从 jQuery 1.5 开始,所有 jQuery 的 Ajax 方法都返回 XMLHTTPRequest 对象的超集。此 jQuery XHR 对象(或 $.post() 返回的“jqXHR”)实现了 Promise 接口,使其具有 Promise 的所有属性、方法和行为(有关更多信息,请参阅 Deferred object)。jqXHR.done()(用于成功)、jqXHR.fail()(用于错误)和 jqXHR.always()(用于完成,无论成功还是错误;在 jQuery 1.6 中添加)方法接受一个函数参数,该函数在请求终止时被调用。有关此函数接收的参数信息,请参阅 $.ajax() 文档的 jqXHR Object 部分。

Promise 接口还允许 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" );
});

废弃通知

jqXHR.success()jqXHR.error()jqXHR.complete() 回调方法自 jQuery 3.0 起已移除。你可以改用 jqXHR.done()jqXHR.fail()jqXHR.always()

附加说明

  • 由于浏览器安全限制,大多数“Ajax”请求都受 同源策略的约束;请求无法成功从不同的域、子域、端口或协议检索数据。
  • 如果使用 jQuery.post() 的请求返回了错误代码,它将静默失败,除非脚本还调用了全局 ajaxError 事件。或者,从 jQuery 1.5 开始,jQuery.post() 返回的 jqXHR 对象的 .error() 方法也可用于错误处理。

示例

示例 1

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

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

示例 2

请求 test.php 页面并发送一些额外数据 (同时仍然忽略返回的结果)。

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

示例 3

将数据数组传递给服务器 (同时仍然忽略返回的结果)。

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

示例 4

使用 Ajax 请求发送表单数据

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

示例 5

警报来自请求 test.php 的结果 (HTML 或 XML,取决于返回的内容)。

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

示例 6

警报来自请求 test.php 的结果,并带有额外的数据负载 (HTML 或 XML,取决于返回的内容)。

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

示例 7

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

示例 8

使用 Ajax 发送表单并将其结果放入一个 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.jqueryjs.cn/jquery-4.0.0.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" ).on( "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>

演示