Question

I am trying to send javascript arrays to a new page with ajax. There are lots of questions on that on SO, and after scouring the answers I decided to use Ajax like so:

var test = {}; 
test['a1'] = 1;  
test['a2'] = 2;

$(document).ready(function(){
$('#form').submit(function(e){

    $.ajax({
        url: 'newpage.php',
        data: {test:test},
        type: 'post',
        success: function(data) {
        alert(data);
        }
    });
    window.open('newpage.php', 'formres','width=800,height=800,resizeable,scrollbars');
    e.preventDefault();
});

});

It works in that the new window open as it should – but the $_POST-array is empty. What am I doing wrong?

Edit:
I have tried {test:test}, {‘test’:test} and just test. I will try to serialize the data and see what happens. @Louis H: thank you, hadn’t thought of that. I will try with Firebug. Thanks a bunch, all of you!

Edit2: It still bothers me though that the test array didn’t go through. As Kevin B pointed out, the post request should hold the parameters a1 and a2, but it doesn’t. I’ll post again if I find out what I am doing wrong.

Answer 1

try

$(this).serialize()

for your data. this will serialize the form into correct post-data, which can be used by $_POST

more information: http://api.jquery.com/serialize/

and maybe you want to display the result of this post in the popup? then you should open the window in the callback function.

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

    $.ajax({
        url: 'newpage.php',
        data: $(this).serialize(),
        type: 'post',
        success: function(data) {
            alert(data);
            window.open('newpage.php', 'formres','width=800,height=800,resizeable,scrollbars');
        }
    });

    return false;
});