JQuery Ajax POST请求：请求体为JSON、响应为HTML是否正确？

首先先给你说对的地方：

• 你把dataType设为'html'是完全正确的，这个参数是告诉jQuery服务器返回的响应格式是HTML，它会正确解析并传给success回调，然后你把响应HTML插入到#content里的逻辑也没问题。

但这段代码有个关键的遗漏，会导致服务器无法正确解析你的JSON请求体：
你用JSON.stringify(barsJSON)把数据转成了JSON字符串，但没有设置请求头的Content-Type为application/json。jQuery默认的Content-Type是application/x-www-form-urlencoded; charset=UTF-8，服务器收到这个请求头时，会按照表单数据的格式去解析请求体，而不是JSON格式，这样服务器就拿不到你传的正确数据了。

所以修正后的代码应该加上contentType: 'application/json'这个配置项：

$.ajax({
  url: '/foo',
  type: 'post',
  dataType: 'html',
  contentType: 'application/json', // 关键新增配置
  data: JSON.stringify(barsJSON),
  success: function (responseHTML) {
    $('#content').html(responseHTML);
  }
});

另外补充个小细节：如果你的项目里用的是jQuery 3.0及以上版本，也可以用更简洁的$.post写法（本质和上面一样）：

$.post({
  url: '/foo',
  dataType: 'html',
  contentType: 'application/json',
  data: JSON.stringify(barsJSON)
})
.done(function(responseHTML) {
  $('#content').html(responseHTML);
});

这样调整后，服务器就能正确识别请求体是JSON格式，同时也能正确处理返回的HTML响应啦～

内容的提问来源于stack exchange，提问作者ace