how to send the form data to server in json format in ajax javascript

Question

function ajax() {
  $('form').submit(function() {
    console.log($(this).serializeArray());
    $('#result').text(JSON.stringify($(this).serializeArray()));
    return false;
  });
}

This is the json data i'm getting:

[{"name":"firstName","value":"erere"},{"name":"lastName","value":"rere"},{"name":"emailAddress","value":"[email protected]"},{"name":"password","value":"dfdfd"},{"name":"phoneNumber","value":"989989898"}]

How can I send it to the server. What should I include in data in the ajax call?

where is your ajax call... .submit() is not ajax() call BTW — bipen
– bipen, Commented Jan 15, 2014 at 11:33
send it like you have them. If you are using php you can json_decode() the data server-side. Also, you can use $(form).serialize() to get a simple name:value pair to submit to your proccess script — andrew
– andrew, Commented Jan 15, 2014 at 11:35
@user3189357 reply from judder is perfect. Read the api.jquery.com/jquery.ajax page for more info on ajax paramenters — andrew
– andrew, Commented Jan 16, 2014 at 11:58

Pez Cuckow · Accepted Answer · 2014-01-15 11:38:30Z

3

A simple example:

$('form').submit(function() {

    $.post( "send.php", $(this).serializeArray())
      .done(function( reply ) {
        alert( "Complete, reply from server: " + reply );
      });

    return false;
});

See: http://api.jquery.com/jquery.post/ for information on handling callbacks.

answered Jan 15, 2014 at 11:38

Pez Cuckow

14.5k19 gold badges83 silver badges132 bronze badges

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

2 Comments

Pez Cuckow Over a year ago

It's whatever you have server side to process the form.

Pez Cuckow Over a year ago

I wish you could downvote comments, you'll need to give us more information to explain what is wrong. Perhaps an error message, or what line the error is occurring on? As far as I am aware there is no 555 error code in HTTP, are you talking about an email error?

James · Accepted Answer · 2014-01-16 12:25:51Z

2

Try this:

$('form').submit(function() {
    var form = $(this);
    var data = form.serialize();

    $.ajax({
        url: 'post url'
        method: 'POST',
        data: data,
        success: function(resp){
             //action on successful post
        },
        error: function() {
            //handle error
        }
    });
    return false;
});

edited Jan 16, 2014 at 12:25

answered Jan 15, 2014 at 11:43

James

2,1991 gold badge20 silver badges22 bronze badges

2 Comments

James Over a year ago

It looks like there's an issue with jQuery serializing your form data, try changing the form.serialize() to form.serializeArray()

t3chb0t Over a year ago

@aRahmanS29 it'd be better to ask @judder first if he meant to use the .serializeArray method instead and not just edit it assuming this is true because it might not have been his intent.

Collectives™ on Stack Overflow

how to send the form data to server in json format in ajax javascript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related