使用 jQuery 发送 JSON 数据

IT技术 javascript jquery ajax
2021-01-23 22:46:16

为什么下面的代码发送数据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);
        }
    }
);
5个回答

因为您既没有指定请求内容类型,也没有指定正确的 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不是数组它是一个具有属性 (CityAge)的 javascript 对象数组[]在 javascript中用 表示例如[{ City: 'Moscow', Age: 25 }, { City: 'Paris', Age: 30 }]是一个包含 2 个对象的数组。
@Darin 拯救了我的一天,谢谢
2021-03-15 22:46:16
从技术上讲,JavaScript 中的对象只是关联数组。因此,虽然这样做令人困惑,但在 JavaScript 中将对象称为数组并不是错误。有关更多信息,请参阅:JavaScript 数据结构
2021-03-16 22:46:16
嗨,我已经在我的代码中对其进行了测试,但它不起作用Pastie.org/pastes/7975866/text为什么?
2021-03-24 22:46:16
@Nadav 令人困惑的事实是不这样做的充分理由。
2021-04-02 22:46:16

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

来自 jQuery 文档$.ajax

[data参数] 转换为查询字符串,如果还不是字符串

如果你想发送 JSON,你必须自己编码:

data: JSON.stringify(arr);

请注意,JSON.stringify它仅存在于现代浏览器中。对于遗留支持,请查看json2.js

我写了一个简短的方便函数来发布 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);
});

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

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

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