Sending a json object with ajax post

Question

Im working on a project, where we try to exchange different parameters between the UI and a RestAPI via AJAX. The RestAPI defines how the data has to look:

I tried to solve it this way:

 $(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 +")");
          }
        }

      });
   });
   });

The alert shows this: [object Object]

And I always get an error message (error: 400), which means that I mus have made a mistake and I think the format I'm sendig is wrong but I dont know how to fix it.

I hope you can help me! :)

Answer 1

I made some changes to your code :

// 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 + ")");
        }
    }

});

in my case it makes this request :

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

which seems good, if the server needs a json, you can stringify the credentials, which gives this paylaod :

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