jQuery ajax - phương thức post()

Hướng dẫn tham khảo jQuery Ajax

Mô hình

Yêu cầu trang web test.php, bỏ qua giá trị trả về:

$.post("test.php");

Mô hình TIY

Thay đổi văn bản của phần tử div qua yêu cầu AJAX POST:

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

Thử ngay

Định nghĩa và cách sử dụng

phương thức post() tải dữ liệu từ máy chủ qua yêu cầu HTTP POST.

Cú pháp

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
Tham số Mô tả
url Bắt buộc. Quy định gửi yêu cầu đến URL nào.
data Tùy chọn. Giá trị bản đồ hoặc chuỗi. Quy định dữ liệu được gửi cùng với yêu cầu đến máy chủ.
success(data, textStatus, jqXHR) Tùy chọn. Hàm回调 được thực hiện khi yêu cầu thành công.
dataType

Tùy chọn. Quy định loại dữ liệu phản hồi từ máy chủ mong đợi.

Mặc định thực hiện quyết định thông minh (xml, json, script hoặc html).

Mô tả chi tiết

Hàm này là hàm Ajax viết tắt, tương đương với:

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

Dựa trên các loại MIME khác nhau của phản hồi, dữ liệu trả về được truyền cho hàm回调 success cũng khác nhau, các dữ liệu này có thể là phần tử XML, chuỗi văn bản, tệp JavaScript hoặc đối tượng JSON. Bạn cũng có thể truyền trạng thái văn bản của phản hồi cho hàm回调 success.

Đối với jQuery 1.5, bạn cũng có thể truyền đối tượng đối tượng jqXHR（jQuery 1.4 truyền là đối tượng XMLHttpRequest）。

Hầu hết các thực hiện sẽ quy định một hàm success:

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

ví dụ này đọc đoạn HTML được yêu cầu và chèn vào trang.

Trang được đọc bằng POST không được lưu trữ, vì vậy jQuery.ajaxSetup() các tùy chọn cache và ifModified trong nó sẽ không ảnh hưởng đến các yêu cầu này.

Ghi chú:Do các hạn chế về an toàn của trình duyệt, hầu hết các yêu cầu "Ajax" tuân thủ chính sách nguồn; yêu cầu không thể thành công trong việc lấy dữ liệu từ các域 khác nhau, subdomain hoặc giao thức.

Ghi chú:Nếu yêu cầu được khởi tạo bởi jQuery.post() trả về mã lỗi, sẽ không có bất kỳ thông báo nào, trừ khi ván bản đã gọi hàm toàn cục phương thức .ajaxError(). hoặc phương thức .error() của đối tượng jqXHR được trả về bởi jQuery.post() cũng có thể được sử dụng để xử lý lỗi.

đối tượng jqXHR

Đối với jQuery 1.5, tất cả các phương thức AJAX của jQuery trả về là siêu tập của đối tượng XMLHTTPRequest. Đối tượng jQuery XHR được trả về bởi $.post() hoặc "jqXHR," thực hiện giao diện thỏa thuận, cung cấp tất cả các thuộc tính, phương thức và hành vi thỏa thuận. Do đó, $.ajax() Để考虑到 hàm回调 tên dễ sử dụng và nhất quán, nó cung cấp các phương thức .error(), .success() và .complete(). Các phương thức này sử dụng hàm được gọi khi yêu cầu kết thúc, hàm này nhận cùng các tham số với các hàm回调 $.ajax() có tên tương ứng.

Giao diện thỏa thuận trong jQuery 1.5 cũng cho phép phương thức Ajax của jQuery, bao gồm $.post(), liên kết nhiều hàm回调 .success(), .complete() và .error() của cùng một yêu cầu, thậm chí có thể phân phối các hàm回调 này sau khi yêu cầu đã hoàn thành.

// Ngay lập tức phân phối trình xử lý sau khi yêu cầu được tạo, hãy nhớ rằng yêu cầu này dành cho đối tượng jqxhr
    var jqxhr = $.post("example.php", function() {
      alert("thành công");
    })
    .success(function() { alert("thành công lần hai"); })
    .error(function() { alert("lỗi"); })
    .complete(function() { alert("hoàn thành"); });
    // 在这里执行其他任务
    // 为上面的请求设置另一个完成函数
    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 对象，并通过 process() 这个 JavaScript 函数进行处理：

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

例子 7

获得 test.php 页面返回的 json 格式的内容：

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

Hướng dẫn tham khảo jQuery Ajax