Ajax getting 400 Bad Request when submitting Form

Question

I am trying to POST a form data to my server. I have wrote the following ajax call but I keep getting 400 Bad error. Any help?

$(document).ready(function(){
    // click on button submit
    $("#submit").on('click', function(){
        // send ajax
        $.ajax({
            url: "/compare",
            type : "POST",
            contentType : 'application/json; charset=utf-8',
            data : $('#form').serialize(),
            success : function(result) {
                console.log(result);
            },
            error: function(xhr, resp, text) {
                console.log(xhr, resp, text);
            }
        })
    });
});

The following is my HTML form:

<form id="form">
    <p>Input the URL of 2 images!</p>
    <input id="img1" name="img1" type="text" placeholder="Image 1 URL">
    <input id="img2" name="img2" type="text" placeholder="Image 2 URL">
<input id="submit" type="submit" value="Compare!">
</form>

Does your server at `/compare` serve the HTTP `POST` method? — davidbuzatto, Oct 16 '17 at 17:51
You're serializing a form, yet you're sending it as JSON. We don't know what the server expects, but you'll get weird data doing that. — adeneo, Oct 16 '17 at 17:54
@adeneo I am trying to Post the form data as json that's all. The server expects data as Json. — AspiringMat, Oct 16 '17 at 17:55
I basically want the server to recieve: { 'img1': URL_HERE, 'img2': URL_HERE } — AspiringMat, Oct 16 '17 at 17:56
As @adeneo said, you have different type of data being submited and being said to the server. — davidbuzatto, Oct 16 '17 at 17:56
FYI, never ever name a button inside a form `submit`, it's bad form. — adeneo, Oct 16 '17 at 17:56

score 2 · Accepted Answer · answered Oct 16 '17 at 17:57

Since you are trying to send JSON to the server you can create a object with your data and then stringify it before sending it to the server.

$(document).ready(function(){
    // click on button submit
    $("#submit").on('click', function(){
        // send ajax
        var img1 = $("#img1").val();
        var img2 = $("#img2").val();
        var myData = {img1: img1, img2: img2};
        $.ajax({
            url: "/compare",
            type : "POST",
            contentType : 'application/json; charset=utf-8',
            data : JSON.stringify(myData),
            success : function(result) {
                console.log(result);
            },
            error: function(xhr, resp, text) {
                console.log(xhr, resp, text);
            }
        })
    });
});

A more generic method can be found here: https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery — davidbuzatto, Oct 16 '17 at 17:57

davidbuzatto · Answer 2 · 2017-10-16T18:07:41.777

Based on: Convert form data to JavaScript object with jQuery

$(document).ready(function(){

    $("#submit").on('click', function(){

        // an object to store the form data
        var data = {};

        // for each array element of the serializeArray
        // runs the function to create a new attribute on data
        // with the correct value
        $("#form").serializeArray().forEach( function(element){
            data[element.name] = element.value;
        });

        // send ajax
        $.ajax({
            url: "/compare",
            type : "POST",
            contentType : 'application/json; charset=utf-8',
            data : JSON.stringify(data),   // serializes the data object to JSON
            success : function(result) {
                console.log(result);
            },
            error: function(xhr, resp, text) {
                console.log(xhr, resp, text);
            }
        })
    });
});

score 0 · Answer 3 · answered Oct 16 '17 at 18:28

Change your JS code with below code:

$(document).ready(function(){
    // click on button submit
    $("#submit").on('click', function(){
        // send ajax
        $.ajax({
            url: "/compare",
            type : "POST",
            contentType : 'application/json; charset=utf-8',
            data : JSON.stringify( $(form).serializeArray() ),
            success : function(result) {
                console.log(result);
            },
            error: function(xhr, resp, text) {
                console.log(xhr, resp, text);
            }
        })
    });
});

i sent form data after convert into json with this code: JSON.stringify($(form).serializeArray() )

score -1 · Answer 4 · answered Oct 16 '17 at 17:49

-1

Change the contenttype:

$(document).ready(function(){
// click on button submit
$("#submit").on('click', function(){
    // send ajax
    $.ajax({
        url: "/compare",
        type : "POST",
        contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
        data : $('#form').serialize(),
        success : function(result) {
            console.log(result);
        },
        error: function(xhr, resp, text) {
            console.log(xhr, resp, text);
        }
    })
});

});

answered Oct 16 '17 at 17:49

Robson

157
1
4

Doesn't $('#form').serialize() return a JSON? I am trying to send JSON to the server. – AspiringMat Oct 16 '17 at 17:50
"The .serialize() method creates a text string in standard URL-encoded notation. " https://api.jquery.com/serialize/ – Andrew Lohr Oct 16 '17 at 17:53

Ajax getting 400 Bad Request when submitting Form

4 Answers4