使用 jQuery 发送 JSON 数据答案

【问题标题】：Send JSON data with jQuery使用 jQuery 发送 JSON 数据
【发布时间】：2011-09-29 01:20:35
【问题描述】：

为什么下面的代码以City=Moscow&Age=25而不是JSON格式发送数据？

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

【问题讨论】：

dataType 是返回的内容，而不是发送的内容！
尝试将'dataType'放在数据之前...不确定。
防止data被转换为查询字符串格式集processData: false。见api.jquery.com/jquery.ajax/#sending-data-to-server

标签： javascript jquery ajax

【解决方案1】：

因为您既没有指定请求内容类型，也没有指定正确的 JSON 请求。下面是发送 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);
    }
});

注意事项：

使用JSON.stringify 方法将javascript 对象转换为JSON 字符串，该字符串是现代浏览器内置的原生字符串。如果您想支持旧版浏览器，您可能需要包含 json2.js
使用 contentType 属性指定请求内容类型，以便向服务器指示发送 JSON 请求的意图
dataType: 'json' 属性用于您期望从服务器获得的响应类型。 jQuery 足够智能，可以从服务器 Content-Type 响应标头中猜测它。因此，如果您的 Web 服务器或多或少地尊重 HTTP 协议并以 Content-Type: application/json 响应您的请求，jQuery 将自动将响应解析为 javascript 对象到 success 回调中，这样您就不需要指定dataType 财产。

注意事项：

您所称的arr 是不是数组。它是一个带有属性（City 和 Age）的 javascript 对象。数组在 JavaScript 中用[] 表示。例如[{ City: 'Moscow', Age: 25 }, { City: 'Paris', Age: 30 }] 是一个包含 2 个对象的数组。

【讨论】：

嗨，我已经在我的代码中测试过了，但它不起作用pastie.org/pastes/7975866/text为什么？
从技术上讲，JavaScript 中的对象只是关联数组。因此，虽然这样做会让人感到困惑，但在 JavaScript 中将对象称为数组并不是一个错误。欲了解更多信息，请参阅：JavaScript Data Structures
@Nadav 令人困惑的事实是绰绰有余理由不这样做。
@Darin 拯救了我的一天，谢谢

【解决方案2】：

因为默认情况下，jQuery 会将作为data 参数传递的对象序列化为$.ajax。它使用$.param 将数据转换为查询字符串。

来自$.ajax 的 jQuery 文档：

[data 参数] 被转换为查询字符串，如果不是字符串的话

如果你想发送 JSON，你必须自己编码：

data: JSON.stringify(arr);

请注意，JSON.stringify 仅存在于现代浏览器中。如需旧版支持，请查看json2.js

【讨论】：

【解决方案3】：

我为发布 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);
});

【讨论】：

【解决方案4】：

您需要设置正确的内容类型并字符串化您的对象。

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

【讨论】：

【解决方案5】：

它被序列化，以便 URI 默认可以读取 POST 请求中的名称值对。您可以尝试将 processData:false 设置为您的参数列表。不确定这是否会有所帮助。

【讨论】：