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>

Answer 1

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);
            }
        })
    });
});

Answer 2

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);
            }
        })
    });
});

Answer 3

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() )

Answer 4

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);
        }
    })
});

});