CODEWITHSUNDEEP
jqueryajax
Spittal
Spittal

Reputation: 779

Send Post Form Data in Json Format Via Ajax With JQuery

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.

Upvotes: 3

Views: 38603

Answers (2)

Philip
Philip

Reputation: 4592

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

Upvotes: 10

noderman
noderman

Reputation: 1944

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>

Upvotes: 0

Related Questions