如何使用 JQuery 发布 JSON 数据?
Posted
技术标签:
【中文标题】如何使用 JQuery 发布 JSON 数据?【英文标题】:How can I use JQuery to post JSON data? 【发布时间】:2011-09-09 11:11:02 【问题描述】:我想将 Json 发布到同一服务器上的 Web 服务。但我不知道如何使用 JQuery 发布 Json。我试过这段代码:
$.ajax(
type: 'POST',
url: '/form/',
data: "name":"jonas",
success: function(data) alert('data: ' + data); ,
contentType: "application/json",
dataType: 'json'
);
但是使用这个 JQuery 代码,数据不会在服务器上作为 Json 接收。这是服务器上的预期数据:"name":"jonas"
,但使用 JQuery,服务器接收 name=jonas
。或者换句话说,它是“urlencoded”数据,而不是 Json。
有什么方法可以使用 JQuery 以 Json 格式发布数据而不是 urlencoded 数据?还是我必须使用手动 ajax 请求?
【问题讨论】:
【参考方案1】:你传递的是一个对象,不是一个 JSON 字符串。当你传递一个对象时,jQuery 使用$.param
将对象序列化为名称-值对。
如果将数据作为字符串传递,则不会被序列化:
$.ajax(
type: 'POST',
url: '/form/',
data: '"name":"jonas"', // or JSON.stringify (name: 'jonas'),
success: function(data) alert('data: ' + data); ,
contentType: "application/json",
dataType: 'json'
);
【讨论】:
请使用 $.post 而不是 $.ajax。 @user3746259 你为什么要使用$.post
呢?它是 (a) 只是 $.ajax
的包装器,并且 (b) 无法执行此处所需的操作(即 contentType
属性)。
直到,你知道,jQuery 3,也就是说,它仍然在未来现在,不要介意这个答案是在四年前写的 i>.
@lonesomeday 谢谢。我有同样的问题,将对象转换为字符串后,它工作了。
@lonesomeday 即使在 3.2 中我也不得不使用您的方法来强制 contentType 为 json。 耸耸肩【参考方案2】:
根据 lonesomeday 的回答,我创建了一个包含某些参数的 jpost
。
$.extend(
jpost: function(url, body)
return $.ajax(
type: 'POST',
url: url,
data: JSON.stringify(body),
contentType: "application/json",
dataType: 'json'
);
);
用法:
$.jpost('/form/', name: 'Jonh' ).then(res =>
console.log(res);
);
【讨论】:
【参考方案3】:您可以使用 ajax 发布数据:
$.ajax(
url: "url",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify( name: 'value1', email: 'value2' ),
success: function (result)
// when call is sucessfull
,
error: function (err)
// check the err for error details
); // ajax call closing
【讨论】:
【参考方案4】:我尝试了 Ninh Pham 的解决方案,但在我对其进行调整之前它对我不起作用 - 见下文。删除 contentType 并且不要对你的 json 数据进行编码
$.fn.postJSON = function(url, data)
return $.ajax(
type: 'POST',
url: url,
data: data,
dataType: 'json'
);
【讨论】:
这不会发布 JSON 请求正文【参考方案5】:最佳答案效果很好,但我建议在发布之前将 JSON 数据保存到变量中,这样在发送长表单或处理大数据时会更简洁一些。
var Data =
"name":"jonsa",
"e-mail":"qwerty@gmail.com",
"phone":1223456789
;
$.ajax(
type: 'POST',
url: '/form/',
data: Data,
success: function(data) alert('data: ' + data); ,
contentType: "application/json",
dataType: 'json'
);
【讨论】:
您忘记字符串化数据【参考方案6】:使用Promise
并检查body
对象是否是有效的JSON。如果不是,则返回 Promise reject
。
var DoPost = function(url, body)
try
body = JSON.stringify(body);
catch (error)
return reject(error);
return new Promise((resolve, reject) =>
$.ajax(
type: 'POST',
url: url,
data: body,
contentType: "application/json",
dataType: 'json'
)
.done(function(data)
return resolve(data);
)
.fail(function(error)
console.error(error);
return reject(error);
)
.always(function()
// called after done or fail
);
);
【讨论】:
以上是关于如何使用 JQuery 发布 JSON 数据?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 jQuery / JavaScript 解析 JSON 数据?