JQuery: Ajax POST call doesn't send data

Question

Firebug says that request was sent to server with 200OK but PHP array $_POST is empty.

var pass_data = {
    'email':$("#email").val(),
    'verifyemail':$("#verifyemail").val(),
    'password':$("#password").val(),
    'confirm_password':$("#vPassword").val(),
}

$.ajax({
    type: "POST",
    url: 'localhost/pages/register',
    dataType: 'json',
    data: pass_data,

});

Request headers:

Accept  application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Content-Length  86
Content-Type    application/x-www-form-urlencoded; charset=UTF-8
Host    localhost
Referer http://localhost/
User-Agent  Mozilla/5.0 (Windows NT 6.1; rv:21.0) Gecko/20100101 Firefox/21.0
X-Requested-With    XMLHttpRequest

Any ideas?

Answer 1

I generally avoid using jQuery return values directly in variable declarations. The quoting can make parsing inconsistent. Suggest this:

var pass_data = $('form').serialize();

Let jQuery do the heavy lifting.

P.S. Just noticed your variable declaration for pass_data had a trailing comma after the last element. That's malformed. Same issue with the object you're passing to $.ajax. Get rid of the trailing comma on the last pair.