Форма POST с использованием Javascript

Я разрабатываю простую веб-страницу, используя bootstrap/javascript в качестве интерфейса, и я пытаюсь отправить HTTP POST для доступа к моему серверу (я использовал Spring в качестве сервера), но я получаю 400 Bad Request.

У меня есть следующий скрипт и HTML, и я пытаюсь передать идентификатор формы для функции ниже для выполнения HTTP POST.

// скрипт на теге функция sendData(данные) {

      alert('Data' + data);
      var XHR = new XMLHttpRequest();
      var urlEncodedData = "";
      var urlEncodedDataPairs = [];
      var name;

      // Turn the data object into an array of URL-encoded key/value pairs.
      for(name in data) {
        urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
      }

      // Combine the pairs into a single string and replace all %-encoded spaces to 
      // the '+' character; matches the behaviour of browser form submissions.
      urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');

      // Define what happens on successful data submission
      XHR.addEventListener('load', function(event) {
        event.preventDefault();
        alert('Yeah! Data sent and response loaded.');
      });

      // Define what happens in case of error
      XHR.addEventListener('error', function(event) {
        alert('Oops! Something goes wrong.');
      });

      // Set up our request
      XHR.open('POST', 'http://localhost:8080/api/novoCondomino');

      // Add the required HTTP header for form data POST requests
      XHR.setRequestHeader('Content-Type', 'application/json');

      // Finally, send our data.
      alert('urlEncodedData' + urlEncodedData);
      XHR.send(urlEncodedData);
    }

    </script>

// HTML-код формы

<FORM NAME = "myform" id = "inputform" onSubmit = "JavaScript:sendData(inputform)">
     <div class = "form-row">

    <div class = "form-group col-md-12">
        <label for = "inputAddress">Nome</label>
        <input type = "text" class = "form-control" id = "condomino" placeholder = "Nome">
    </div>
  </div>
  <div class = "form-group">
    <label for = "inputAddress2">Apartamento</label>
    <input type = "text" class = "form-control" id = "apto" placeholder = "Apto">

  </div>
  <div class = "form-group">
      <label for = "inputPassword4">Senha</label>
      <input type = "password" class = "form-control" id = "password" placeholder = "Password">
  </div>
  <div class = "form-row">
  </div>
  <div class = "form-group">
    <div class = "form-check">
      <input class = "form-check-input" type = "checkbox" id = "gridCheck">
      <label class = "form-check-label" for = "gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <input type = "submit" value = "Send "class = "btn btn-primary">Sign in</button>
</form>

Когда я нажимаю кнопку, чтобы отправить форму, я получаю 400 Bad Request Error. Я знаю, что это неправильно, потому что кажется, что я отправляю HTMLDocumentElement в качестве полезной нагрузки вместо объекта JSON. Я нашел некоторые решения без Javascript, но оказалось, что мой бэкэнд не будет принимать application/x-www-form-urlencoded, поэтому я хочу установить тип контента в application/json. POST отлично работает при использовании POSTMAN при передаче объекта JSON в качестве данных.

Как я могу исправить свой код с помощью решения Javascript для отправки данных из формы точно так, как ожидает мой бэкэнд (некоторый класс DTO, как показано ниже)

// класс DTO, ожидаемый серверной частью открытый класс UserCommand {

    public UserCommand() {

    }

    private int apartament;
    private String name;
    private String password;

//Контроллер на стороне сервера

@ResponseBody
@PostMapping(value = "/novoCondomino"
)
public User createUser(@RequestBody UserCommand newUser)
    {

    return usrService.createUser(newUser.toUser());
}

Заранее спасибо.