用Ajax帖子发送JSON对象

Question

我正在研究一个项目，我们尝试通过Ajax在UI和RESTAPI之间交换不同的参数。 RESTAPI定义数据必须如何：

我尝试以这种方式求解它：

 $(document).ready(function(){
  $("#submit").click(function(){
      var credentials = [
          {user_name: $("#uname").val(),
            password: $("#pwd").val()
          }
      ];
      alert(credentials);
      $.ajax({
          url:"../rest/user/login",
          type:"POST",
          data:JSON.stringify({credentials: credentials}),
          success: function(){
            window.location.href = "startrackhome.html";
          },
          error:  function error(response){
            try{
              var json = JSON.parse(response.responseText);
              if(typeof json.message === 'undefined'){
                throw new Error("Response json has no message");
              }
              else{
                alert(json.message);
              }
            }
          catch(ex){
            alert("unexpected error (code:" + response.status +")");
          }
        }

      });
   });
   });

该警报显示以下内容：[object object object]

，我始终收到一个错误消息（错误：400），这意味着我犯了一个错误，我认为我的sendig格式是错误的，但我不知道如何解决它。

希望您能帮助我！ :)

Answer 1

我对您的代码进行了一些更改：

// credentials is an object
var credentials = {
    user_name: $("#uname").val(),
    password: $("#pwd").val()
}
alert(credentials);
$.ajax({
    // check this url seems a bit off
    url: "../rest/user/login",
    type: "POST",
    data: {
        credentials: credentials
    },
    success: function() {
        window.location.href = "startrackhome.html";
    },
    error: function error(response) {
        try {
            var json = JSON.parse(response.responseText);
            if (typeof json.message === 'undefined') {
                throw new Error("Response json has no message");
            } else {
                alert(json.message);
            }
        } catch (ex) {
            alert("unexpected error (code:" + response.status + ")");
        }
    }

});

在我的情况下，它提出了此请求：

fetch("https://stackoverflow.com/posts/rest/user/login", {
  "headers": {
    "accept": "*/*",
    "accept-language": "",
    "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
    "sec-ch-ua": "\" Not A;Brand\";v=\"99\", \"Chromium\";v=\"102\"",
    "sec-ch-ua-mobile": "?0",
    "sec-ch-ua-platform": "\"Linux\"",
    "sec-fetch-dest": "empty",
    "sec-fetch-mode": "cors",
    "sec-fetch-site": "same-origin",
    "x-requested-with": "XMLHttpRequest"
  },
  "referrer": "https://stackoverflow.com/posts/72620005/edit",
  "referrerPolicy": "strict-origin-when-cross-origin",
  "body": "credentials%5Buser_name%5D=test&credentials%5Bpassword%5D=test",
  "method": "POST",
  "mode": "cors",
  "credentials": "include"
});

credentials[user_name]: test
credentials[password]: test

这似乎不错，如果服务器需要JSON，则可以将凭据串起，这给出了此Paylaod：

credentials: {"user_name":"test","password":"test"}