Send Post Form Data in Json Format Via Ajax With JQuery

Question

as the title says I'm sending some post data via ajax. but I keep on getting errors, can anyone take a look at the code and explain why my ajax call keeps failing?

submitForm(jQuery('#priceCalc'), {name: 'thingdoto', value: "true"});

function submitForm(form, data) {
        var postData = form.serializeArray(),
            formURL = form.attr("action");

        postData.push(data);
        console.log(postData);
        jQuery.ajax({
                url : formURL,
                type: 'POST',
                dataType : "json",
                data: postData,
                success:function(data)
                {
                        jQuery('#priceTotal').html(data);
                },
                error: function()
                {
                        jQuery('#priceTotal').html('error');
                }
        });
}

EDIT: The ajax call returns the error, so it's just not succeeding. Don't know why.

Oh hey! Sorry it just returns the error, in the ajax call, so I just the string "error". The function does not succeed. — Spittal, Nov 26 '13 at 20:58
Yup, doesn't seem to be an issue with the URL. Thanks for suggestion! — Spittal, Nov 26 '13 at 21:03
Hey, I was declaring two variables in one line you'll notice the comma not semi colon on the line above — Spittal, Nov 26 '13 at 21:07
Are you sure you are getting a 200 response? What is in the response body? Is it actually parseable JSON? — Steve, Nov 26 '13 at 21:10
Chrome network tab gives a 200 OK response, and the consolelog on line 8 looks like just a normal JSON object with 16 entries. So the body should be good? — Spittal, Nov 26 '13 at 21:12
Can you share that JSON block? Or at least run it through jsonlint.com to see if it is valid? — Steve, Nov 26 '13 at 21:13
Hey, Thanks for the hint @Steve looks like I was passing through an array of objects and not valid JSON at all. So my bad! Thanks for all the help! — Spittal, Nov 26 '13 at 21:14

score 11 · Answer 1 · edited Jun 23 '16 at 10:32

You're sending data as an array, not a JSON string.

You want to do something like this.

$("form#ID").submit(function(e){

    e.preventDefault();

    var data = {}
    var Form = this;

    //Gathering the Data
    //and removing undefined keys(buttons)
    $.each(this.elements, function(i, v){
            var input = $(v);
        data[input.attr("name")] = input.val();
        delete data["undefined"];
    });

    //Form Validation goes here....

    //Save Form Data........
    $.ajax({
        cache: false,
        url : ?,
        type: "POST",
        dataType : "json",
        data : JSON.stringify(data),
        context : Form,
        success : function(callback){
            //Where $(this) => context == FORM
            console.log(JSON.parse(callback));
            $(this).html("Success!");
        },
        error : function(){
            $(this).html("Error!");
        }
    });

This logic "Gathering the Data" works for text fields, but does not work for checkboxes. It always transfers the "value" of the checkbox element regardless whether the checkbox is checked or not. — Mathias Conradt, Dec 03 '15 at 20:06

score 0 · Answer 2 · edited May 23 '17 at 11:52

Old question, but I just ran into this situation:

jquery ajax returns success when directly executed, but returns error when attached to button, even though server response is 200 OK

And found out that the problem (in my case) was that calling ajax from a button inside a form to send JSON seems to cause JQuery to misinterpret the server response -- and always consider it an error. My solution was to change the form to a div or to change the button tag to an a tag (using Bootstrap to render a as button)

This worked

<div>
    <button></button>
</div>

or

<form>
    <a></a>
</form>

Send Post Form Data in Json Format Via Ajax With JQuery

2 Answers2

Linked