当前位置: 首页>>编程示例 >>用法及示例精选 >>正文

JQuery jQuery.post()用法及代码示例

用法 
jQuery.post( url [, data ] [, success ] [, dataType ] ) => jqXHR

说明：使用 HTTP POST 请求向服务器发送数据。

  • 添加的版本：1.0jQuery.post( url [, data ] [, success ] [, dataType ] )

    • url
      类型：String
      包含请求发送到的 URL 的字符串。
    • data
      类型：PlainObject 或 String
      与请求一起发送到服务器的普通对象或字符串。
    • success
      类型：Function(PlainObject数据，String文本状态，jqXHRjqXHR)
      请求成功时执行的回调函数。如果提供了dataType，则为必需，但在这种情况下可以是null。
    • dataType
      类型：String
      服务器预期的数据类型。默认值：智能猜测(xml、json、脚本、文本、html)。

  • 添加的版本：1.12-and-2.2jQuery.post( [settings ] )

    • settings
      类型：PlainObject
      一组配置 Ajax 请求的键/值对。除url 之外的所有属性都是可选的。可以使用 $.ajaxSetup() 为任何选项设置默认值。有关所有设置的完整列表，请参阅jQuery.ajax( settings )。类型将自动设置为 POST 。

这是一个简写的 Ajax 函数，相当于：

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

success 回调函数传递返回的数据，该数据将是 XML 根元素或文本字符串，具体取决于响应的 MIME 类型。它还传递了响应的文本状态。

从 jQuery 1.5 开始， 这success回调函数也传递了一个"jqXHR" 对象(在jQuery 1.4, 它通过了XMLHttpRequest目的)。

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

$.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 的所有属性、方法和行为(参见延迟对象了解更多信息)。这jqXHR.done()(为了成功)，jqXHR.fail()(对于错误)，和jqXHR.always()(用于完成，无论是成功还是错误；在 jQuery 1.6 中添加)方法采用一个函数参数，该参数在请求终止时调用。有关此函数接收的参数的信息，请参阅jqXHR 对象的部分$.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" );
})
  .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" 请求都受制于 same origin policy ；请求无法从不同的域、子域、端口或协议成功检索数据。
  • 如果带有 jQuery.post() 的请求返回错误代码，它将静默失败，除非脚本还调用了全局 .ajaxError() 方法。或者，从 jQuery 1.5 开始，jQuery.post() 返回的 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 );
});

使用额外的数据负载(HTML 或 XML，取决于返回的内容)通过请求 test.php 来提醒结果。

$.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")); ?>)。

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

使用 Ajax 发布表单并将结果放入 div

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.post demo</title>
  <script src="https://code.jquery.com/jquery-3.5.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" ).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>

演示：

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 jQuery.post()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。