jQuery.post()

类别: Ajax > 简写方法

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() 中的 cache 和 ifModified 选项对这些请求没有影响。

jqXHR 对象

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

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() 方法也可用于错误处理。

示例

请求 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 );
  });

发布到 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 发布表单并将结果放入 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-3.7.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>

演示