jQuery ajax - روش post()

مثال

درخواست وب‌صفحه test.php را ارسال کنید، اما ارزش بازگشتی را نادیده بگیرید:

$.post("test.php");

مثال‌های عملی

تغییر متن عنصر div با درخواست AJAX POST:

$("input").keyup(function(){
  txt=$("input").val();
  $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
    $("span").html(result);
  });
});

آزمایش کنید

تعریف و استفاده

روش post() داده‌ها را از سرور با درخواست HTTP POST بارگذاری می‌کند.

نحوه استفاده

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
پارامترها توضیحات
url ضروری. URL‌ای که درخواست به آن ارسال می‌شود را تعیین می‌کند.
data اختیاری. مقادیر یا رشته‌ای که با درخواست ارسال می‌شود. داده‌های ارسالی به سرور را تعیین می‌کند.
success(data, textStatus, jqXHR) اختیاری. تابع بازگشتی که در موفقیت درخواست اجرا می‌شود.
dataType

اختیاری. نوع داده‌ای که انتظار می‌رود از سرور دریافت شود را تعیین می‌کند.

اجرای پیش‌فرض هوشمندانه (xml، json، script یا html).

توضیحات دقیق‌تر

این تابع یک تابع Ajax کوتاه شده است، معادل:

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

در پاسخ به نوع مختلف MIME، داده‌های ارسالی به تابع بازگشتی موفقیت نیز متفاوت است، این داده‌ها می‌توانند شامل عنصر XML، رشته متنی، فایل JavaScript یا شیء JSON باشند. همچنین می‌توان به تابع بازگشتی موفقیت، وضعیت متنی پاسخ را نیز ارسال کرد.

برای jQuery 1.5 نیز می‌توان به تابع بازگشتی موفقیت، jqXHR 对象در jQuery 1.4 یک شیء XMLHttpRequest ارسال می‌شود).

بیشتر اجراها یک تابع موفقیت تعیین می‌کنند:

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

本例读取被请求的 HTML 片段,并插入页面中。

通过 POST 读取的页面不被缓存,因此 jQuery.ajaxSetup() 中的 cache 和 ifModified 选项不会影响这些请求。

注释:由于浏览器安全方面的限制,大多数 "Ajax" 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。

注释:如果由 jQuery.post() 发起的请求返回错误代码,那么不会有任何提示,除非脚本已调用了全局的 .ajaxError() 方法。或者对于 jQuery 1.5,jQuery.post() 返回的 jqXHR 对象的 .error() 方法也可以用于错误处理。

jqXHR 对象

对于 jQuery 1.5,所有 jQuery 的 AJAX 方法返回的是 XMLHTTPRequest 对象的超集。由 $.post() 返回的 jQuery XHR 对象或 "jqXHR,"实现了约定的接口,赋予其所有的属性、方法,以及约定的行为。出于对由 $.ajax() 使用的回调函数名称便利性和一致性的考虑,它提供了 .error(), .success() 以及 .complete() 方法。这些方法使用请求终止时调用的函数参数,该函数接受与对应命名的 $.ajax() 回调函数相同的参数。

jQuery 1.5 中的约定接口同样允许 jQuery 的 Ajax 方法,包括 $.post(),来链接同一请求的多个 .success()、.complete() 以及 .error() 回调函数,甚至会在请求也许已经完成后分配这些回调函数。

// 请求生成后立即分配处理程序,请记住该请求针对 jqxhr 对象
    var jqxhr = $.post("example.php", function() {
      alert("success");
    })
    .success(function() { alert("second success"); })
    .error(function() { alert("error"); })
    .complete(function() { alert("complete"); });
    // در اینجا سایر وظایف را اجرا کنید
    // برای درخواست بالا یک تابع کامل دیگری تنظیم کنید
    jqxhr.complete(function(){ alert("second complete"); });

مثال‌های بیشتر

مثال 1

درخواست صفحه test.php را ارسال کنید و داده‌های اضافی را با آن ارسال کنید (در حالی که بازگشت‌دهی را همچنان نادیده می‌گیرید)

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

مثال 2

یک آرایه داده را به سرور ارسال کنید (در حالی که بازگشت‌دهی را همچنان نادیده می‌گیرید)

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

مثال 3

داده‌های فرم را با درخواست Ajax ارسال کنید

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

مثال 4

نتایج بازگردانده شده از صفحه درخواست test.php را چاپ کنید (HTML یا XML بسته به محتوای بازگردانده شده)

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

مثال 5

داده‌ها را به صفحه test.php ارسال کنید و نتایج را چاپ کنید (HTML یا XML بسته به محتوای بازگردانده شده)

$.post("test.php", { name: "Bill", time: "2pm" },
   function(data){
     alert("Data Loaded: " + data);
   });

مثال 6

محتوای صفحه test.php را دریافت کنید و آن را به عنوان یک شیء XMLHttpResponse ذخیره کنید و سپس توسط تابع JavaScript process() پردازش کنید:

$.post("test.php", { name: "Bill", time: "2pm" },
   function(data){
     process(data);
   }, "xml");

مثال 7

محتوای json فرمت شده‌ای که توسط صفحه test.php بازگردانده می‌شود را دریافت کنید:

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