jQuery AJAX with Multiple Array data Parameters

Question

I've successfully posted a single array, but I can't figure out how to send more than one array in an AJAX post. Here is my code for one array:

var a = new Array();
// fill array
var a_post = {};
a_post['array1[]'] = a;

$.ajax({
    url: "submitOrder.php",
    data: a_post,
    type: 'post',
    success: function(data) {
        alert(data);
    }
});

And in submitOrder.php I have:

$array1= $_POST['array1'];

foreach ($array1 as $a => $b)
echo "$array1[$a] <br />";

This works fine. However, when I try to add a second array b_post to the data: field, it doesn't work. I tried data: {a_post, b_post}, and a few variations of that, but I can't get it to work properly. While I'm at it, how would I then load submitOrder.php after posting rather than show an alert of the data?

UPDATE

Using Nicolas' suggestion, I got this to work changing the data field to:

data: {'array1':JSON.stringify(a), 'array2':JSON.stringify(b)},

However, I also need to add the rest of the form data that has been input by the user. I can get this data with $(this).serialize() but if I try to add that to the data field, it does not work. How can I add this data to the above line?

Thanks.

SOLUTION

What ended up working the way I originally had hoped for (with Nicolas' help):

var formData = $(this).serializeArray();
var a_string = JSON.stringify(a);
formData.push({name: 'array1', value: a_string});
var b_string = JSON.stringify(b);
formData.push({name: 'array2', value: b_string});

$.ajax({
    url: "submitOrder.php",
    data: formData,
    type: 'post',
    success: function(data) {
        alert(data);
    }
});

Nicolás Torres · Accepted Answer · 2012-06-04 20:56:27Z

4

The data should be encapsuled this way

data: {'first_array':JSON.stringify(array1),'second_array':JSON.stringify(array2)}

Then in PHP:

$array1 = json_decode($_POST['first_array']);
$array2 = json_decode($_POST['second_array']);

You can add the rest of the inputs as well.

data: {'first_array':JSON.stringify(array1),'second_array':JSON.stringify(array2),'input1':$(input[name="input1"]).val()}

Just repeat with all the inputs you want to send.

'input1':$(input[name="input1"]).val(),'input2':$(input[name="input2"]).val(),... etc

edited Jun 4, 2012 at 20:56

answered Jun 4, 2012 at 19:16

Nicolás Torres

1,3458 silver badges13 bronze badges

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

3 Comments

Kevin_TA Over a year ago

This is working nicely for my purposes, however I'd also like to include my standard form data as well. The easiest way to do this would be adding $(this).serialize() to the data field, but this is not allowed. How could I also include the rest of the input data from the form?

Kevin_TA Over a year ago

Thanks. I've updated my question with the full solution that worked.

Iman Estiri Over a year ago

How we can decode this in Asp.net C# ? @Kevin_TA

Collectives™ on Stack Overflow

jQuery AJAX with Multiple Array data Parameters

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related