使用AJAX POST发送JSON对象返回400错误问题咨询

你的请求返回400是两个明确的格式错误导致的：

• 参数结构不符合接口要求：接口规定credentials字段值是携带user_name、password属性的对象，你额外给这个对象套了一层数组，和接口定义的结构不匹配。
• 缺少JSON请求头声明：你虽然用JSON.stringify把参数转成了JSON字符串，但没有在AJAX配置中指定请求内容类型为JSON，jQuery默认会以application/x-www-form-urlencoded表单格式发送请求，后端无法识别JSON格式的请求体，直接判定参数错误返回400。

另外你弹窗显示[object Object]属于正常现象：alert方法会自动将传入的非字符串值调用toString()方法转换，对象、数组类型的默认转换结果就是这个值，调试参数建议使用浏览器控制台的console.log()方法打印，不要依赖alert查看结构。

$(document).ready(function(){
  $("#submit").click(function(){
      // 移除外层包裹的数组，credentials直接为接口要求的对象结构
      var credentials = {
        user_name: $("#uname").val(),
        password: $("#pwd").val()
      };
      // 控制台打印参数方便调试
      console.log("登录提交参数：", credentials);
      $.ajax({
        url: "../rest/user/login",
        type: "POST",
        // 声明发送的内容为JSON格式，必须添加该配置
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({credentials: credentials}),
        success: function(){
          window.location.href = "startrackhome.html";
        },
        error: function(response){
          try{
            var json = JSON.parse(response.responseText);
            if(typeof json.message === 'undefined'){
              throw new Error("Response json has no message");
            }
            alert(json.message);
          }
          catch(ex){
            alert("unexpected error (code:" + response.status +")");
          }
        }
      });
  });
});

修改完成后打开浏览器开发者工具，切换到「网络」面板，找到对应的login请求确认两点：

• 请求头中的Content-Type字段值为application/json; charset=utf-8
• 请求载荷（Request Payload）结构为如下格式，和接口要求完全匹配：

{
  "credentials": {
    "user_name": "实际输入的用户名",
    "password": "实际输入的密码"
  }
}

两项都符合要求的话，400错误就会解决。

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