AJAX 请求返回“实体不是格式正确的‘application/json’文档。 输入缺失或为空","code":"400"'

Question

As I was trying to create an AJAX request in order to post some users against an external API, I encountered this issue preventing me from doing so. I haven't used JS as much as PHP and I thought this would be a good time to start learning a bit more.

The method I made checks first if the form contactForm has been fully completed, while it hasn't, it prevents the js from sending the data and showing the next form customerForm .

If all the data has been properly filled, the js sends the data to the api via AJAX and hides that form to display the next one.

(function() {
  'use strict';
  window.addEventListener('load', function() {
    var contactForm = document.getElementById('contactForm');
    var customerForm = document.getElementById('customerForm');

    var validation = Array.prototype.filter.call(contactForm, function(form) {
      contactForm.addEventListener('submit', function(event) {
        if (contactForm.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        contactForm.classList.add('was-validated');

        if (contactForm.checkValidity() === true) {
            customerForm.style.display = 'block';
            contactForm.style.display = 'none';
            event.preventDefault();
            (function() {
                var contactEmail = document.getElementById('contactEmail').value;
                var contactResellerId = 2;
                var contactName = document.getElementById('contactName').value;
                var contactLastName = document.getElementById('contactLastName').value;
                var contactCompany =  document.getElementById('contactCompany').value;
                var contactRegNum = document.getElementById('contactRegNum').value;

                $.ajax({
                    url: url,
                    type: 'POST',
                    crossDomain: true,
                    withCredentials: true,
                    data: JSON.stringify({
                        firstname: contactName,
                        lastname: contactLastName,
                        company: contactCompany,
                        email: contactEmail,
                        reseller_id: contactResellerId,
                        comregnum: contactRegNum
                    }),
                    dataType: 'json',
                    headers: {
                        'Authorization': 'Basic '+token,
                    }
                })
                .done(function (response) { alert('Se ha creado el contacto!'); })
                .fail(function (jqXHR, textStatus, errorThrown) { alert(jqXHR); });
            })();
        }
      }, false);
    });
  }, false);
})();

Whenever I try to execute this, it returns:

The entity is not a well-formed 'application/json' document. Missing or empty input","code":"400"

Form values are being correctly fetched into the variables, as console.log() proves.

What does the message mean by input? Have I forgotten something?

As always, thank you all for the help, have a nice weekend!

Answer 1

The asnwer to this one was actually quite easy: My AJAX request was indeed not well formed for it lacked some attributes. This is how it should have been:

$.ajax({
    url: url,
    method: 'POST',      <------- THIS
    crossDomain: true,
    withCredentials: true,
    data: JSON.stringify({
        firstname: contactName,
        lastname: contactLastName,
        company: contactCompany,
        email: contactEmail,
        reseller_id: contactResellerId,
        comregnum: contactRegNum
    }),
    dataType: 'json',
    contentType: 'application/json',   <------ THIS
    headers: {
        'Authorization': 'Basic ' + token,
    }
});