ajax call always throws xhr.send( options.hascontent && options.data null ) error

Question

I am trying to make ajax call. But Post call is giving 400 error at "xhr.send( options.hascontent && options.data null )" line.

Below is the code for reference:

$.ajax({
        type: "POST",
        url: "/Security/Login",
        async: false,
        contentType: false,
        beforesend: function (xhr) {
            xhr.setRequestHeader("X-XSRF-TOKEN", $('input:hidden[name =" __RequestVerificationToken"]').val());
        },
        datatype: "json",
        data: "{'Hi'}",        
        processData: false,        
        success: function (response) {

        },
        complete: function (response) {

        }
    });

Why don't you just use the `headers` property to set headers? https://stackoverflow.com/questions/7686827/how-can-i-add-a-custom-http-header-to-ajax-request-with-js-or-jquery — Mitya, Sep 05 '19 at 17:57
Yes, i tried using headers. It didn't work. Its throwing the same error. — Nayana, Sep 05 '19 at 18:00
If you have a response code (400) then the issue relates to the receiving web server. Without knowing what it expects, or how it defines that error message, it's hard to know what could be wrong. — Mitya, Sep 05 '19 at 18:02

score 0 · Answer 1 · edited Dec 05 '20 at 04:09

$.ajax({
    type: "POST",
    url: "/Security/Login",
    async: false,
    contentType: false,
    beforesend: function (xhr) {
        xhr.setRequestHeader("X-XSRF-TOKEN", $('input:hidden[name =" __RequestVerificationToken"]').val());
    },
    datatype: "json",
    data: "{'Hi'}",        
    processData: false,        
    success: function (response) {

    },
    complete: function (response) {

    }
});

Bring down the async false after the data part.

score 0 · Answer 2 · answered Mar 10 '23 at 16:18

I got this same error somewhere from my backend code, while I was trying to fill some list on the object I was retrieving from the ajax call. This was while using C# at NET Core.

I was asking for:

// The returned object was:
Event event = new EventViewModel()
{
    IdEvent = null,
    FileStatusList = _operationsService.GetFileStatusList(), // LINE 2
    Comment = null,
};

return Json(event); // to frontend

Getting rid of LINE 2 solved the problem in the frontend for me. And the jQuery ajax call worked as expected.

var data = {
    id: eventId
}

$.ajax({
    url: '../File/Edit', // To Edit method at File controller
    dataType: "json",
    async: true,
    data: data,
    method: "POST",
    success: function (response) {
            // Handle your response here.
    },
    error: function (ex) {
        console.error(ex.responseText);
    },
});

ajax call always throws xhr.send( options.hascontent && options.data null ) error

2 Answers2