Gửi dữ liệu JSON bằng jQuery

Question

Tại sao mã bên dưới gửi dữ liệu dưới dạng City=Moscow&Age=25 thay vì định dạng JSON?

var arr = {City:'Moscow', Age:25}; 
$.ajax(
    { 
     url: "Ajax.ashx", 
     type: "POST", 
     data: arr, 
     dataType: 'json', 
     async: false, 
     success: function(msg) { 
      alert(msg); 
     } 
    } 
); 

Answer 1

Vì bạn chưa chỉ định không yêu cầu loại nội dung cũng như không sửa yêu cầu JSON. Dưới đây là cách chính xác để gửi yêu cầu JSON:

var arr = { City: 'Moscow', Age: 25 }; 
$.ajax({ 
    url: 'Ajax.ashx', 
    type: 'POST', 
    data: JSON.stringify(arr), 
    contentType: 'application/json; charset=utf-8', 
    dataType: 'json', 
    async: false, 
    success: function(msg) { 
     alert(msg); 
    } 
}); 

Những điều cần chú ý:

• Cách sử dụng của JSON.stringify phương pháp để chuyển đổi một đối tượng javascript vào một chuỗi JSON mà có nguồn gốc và được tích hợp vào trình duyệt hiện đại . Nếu bạn muốn hỗ trợ các trình duyệt cũ hơn, bạn có thể cần phải bao gồm json2.js
• Xác định loại nội dung theo yêu cầu sử dụng contentType tài sản dùng để báo hiệu đến máy chủ mục đích của việc gửi một yêu cầu JSON
• Thuộc tính dataType: 'json' được sử dụng cho các phản ứng loại bạn mong đợi từ máy chủ. jQuery đủ thông minh để đoán từ máy chủ Content-Type tiêu đề phản hồi. Vì vậy, nếu bạn có một máy chủ web mà tôn trọng nhiều hơn hoặc ít hơn các giao thức HTTP và đáp ứng với Content-Type: application/json theo yêu cầu của bạn, jQuery sẽ tự động phân tích cú pháp phản hồi thành một đối tượng javascript thành cuộc gọi success để bạn không cần phải chỉ định thuộc tính dataType.

Những điều cần cẩn thận về:

• Những gì bạn gọi arr là không phải là một mảng. Nó là một đối tượng javascript với các thuộc tính (City và Age). Mảng được biểu thị bằng [] trong javascript. Ví dụ: [{ City: 'Moscow', Age: 25 }, { City: 'Paris', Age: 30 }] là một mảng gồm 2 đối tượng.

Answer 2

Bởi vì theo mặc định, jQuery nối tiếp các đối tượng được chuyển thành tham số data tới $.ajax. Nó sử dụng $.param để chuyển đổi dữ liệu thành chuỗi truy vấn.

Từ các tài liệu jQuery cho $.ajax:

[đối số data] được chuyển thành một chuỗi truy vấn, nếu chưa được một chuỗi

Nếu bạn muốn gửi JSON, bạn sẽ phải tự mã hóa:

data: JSON.stringify(arr); 

Lưu ý rằng JSON.stringify chỉ xuất hiện trong trình duyệt hiện đại. Để được hỗ trợ kế thừa, hãy xem xét json2.js

Answer 3

Nó được tuần tự hóa để URI có thể đọc cặp giá trị tên trong yêu cầu POST theo mặc định. Bạn có thể thử thiết lập processData: false thành danh sách các tham số của bạn. Không chắc chắn nếu điều đó sẽ giúp.

Answer 4

Bạn cần đặt đúng loại nội dung và chỉnh sửa đối tượng của mình.

var arr = {City:'Moscow', Age:25}; 
$.ajax(

      { 
       url: "Ajax.ashx", 
       type: "POST", 
       data: JSON.stringify(arr), 
       dataType: 'json', 
       async: false, 
       contentType: 'application/json; charset=utf-8', 
       success: function(msg) { 
        alert(msg); 
       } 
      } 
     ); 

Answer 5

Tôi đã viết một chức năng tiện lợi ngắn để đăng JSON.

$.postJSON = function(url, data, success, args) { 
    args = $.extend({ 
    url: url, 
    type: 'POST', 
    data: JSON.stringify(data), 
    contentType: 'application/json; charset=utf-8', 
    dataType: 'json', 
    async: true, 
    success: success 
    }, args); 
    return $.ajax(args); 
}; 

$.postJSON('test/url', data, function(result) { 
    console.log('result', result); 
});