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
– Spittal, Commented Nov 26, 2013 at 20:58
Are you sure you are getting a 200 response? What is in the response body? Is it actually parseable JSON? — Steve
– Steve, Commented Nov 26, 2013 at 21:10
Can you share that JSON block? Or at least run it through jsonlint.com to see if it is valid? — Steve
– Steve, Commented Nov 26, 2013 at 21:13

rangfu · Accepted Answer · 2016-06-23 10:32:51Z

10

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

edited Jun 23, 2016 at 10:32

rangfu

9,2272 gold badges23 silver badges23 bronze badges

answered Nov 27, 2013 at 1:06

Philip

4,5822 gold badges22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mathias Conradt Over a year ago

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.

Community · Accepted Answer · 2017-05-23 11:52:55Z

0

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>

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered May 4, 2015 at 18:06

noderman

1,9441 gold badge21 silver badges36 bronze badges

Collectives™ on Stack Overflow

Send Post Form Data in Json Format Via Ajax With JQuery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related