Jquery/ajax post array data

JavaScript
1

hello guys,

I’m passing data to a jquery/ajax that in turns pass the data to a php program. this works fine when i post singular values, but i cannot get it to work when passing an array of data, i need to know how I can capture the array of data and pass on as an array.

my html form:


while($result = mysql_fetch_object($run)){
//dynamically generate input
<input type="text" name="id[]" id="id" class="input" value="1" />
<input type="text" name="price[]" id="price" class="input" value="2.00" />
}

jquery:


var price = $("input#price").val();
var id = $("input#id").val();

 
var dataString = '&price=' + price + '&id=' + id;

$.ajax({
type: "POST",
url: "../web20forms/edit_template_1.php",
data: dataString,
success: function() {
$('#editpriceoflessondiv').html("<div id='message'></div>");
$('#message').html("Thank you<br />Signup was successful!")
.hide()
.fadeIn(1500, function() {
         
        });
      }

so the bit of code i need to change is:
var dataString = ‘&price=’ + price + ‘&id=’ + id;

and maybe the section in the data: as well.

i need my jquery/ajax to send back this type of array:


array(5) { ["id"]=>  array(4) { [0]=>  string(2) "27" [1]=>  string(2) "28" [2]=>  string(2) "29" [3]=>  string(2) "30" } ["price"]=>  array(4) { [0]=>  string(4) "1.00" [1]=>  string(4) "1.00" [2]=>  string(4) "1.00" [3]=>  string(4) "1.00" } ["submit_tmp_lessons_x"]=>  string(3) "135" ["submit_tmp_lessons_y"]=>  string(2) "12" ["submit_tmp_lessons"]=>  string(4) "Save" }

thanks

2

A typical solution these days is to use JSON to return arrays to a JS script, to do this in your PHP script use [B]json_encode/B like the example below

echo json_encode(array());
exit;

In your $.[B]ajax/B source add the method dataType and the value json which would look like the example below

$.ajax({
    dataType: 'json'
});

Then in your success function you should be able to simply call the array values using

$.ajax({
    dataType: 'json',
    success: function(data){
        alert(data.id[0]);
    }
});
3

I have tried this, but it won’t work. when I add the dataType: “json”, my jquery form wont even submit. I have the latest jquery lib. Is there any other way to do this? Is it not possible to loop through my array when posted to my jquery/ajax than somehow pass it back to my php as an array so I can process it?

Thanks

4

I have now slightly modified my jquery/ajax to this:


 $(".button").click(function() {
	
	 	var price = $("input#price").val();
		var id = $("input#id").val();
		
		var dataString = {price: price, id: id};
		//var dataString = '&price=' + price + '&id=' + id;
				
		$.ajax({
      type: "POST",
      url: "../web20forms/edit_template_1.php",
      data: dataString.serialize(),
	  dataType: "json",
      success: function(data) {
        $('#editpriceoflessondiv').html("<div id='message_1'></div>");
        $('#message_1').html(data)
		
        .hide()
        .fadeIn(1500, function() {

        });
      }
     });
    return false;
	});

so I have change this:
var dataString = ‘&price=’ + price + ‘&id=’ + id;

to this:
var dataString = {price: price, id: id};

and on my php it’s coming out as:
array(2) { [“price”]=> string(5) “12.00” [“id”]=> string(1) “6” }

this is good, but I need to know how to loop this bit of jquery/ajax:

var dataString = {price: price, id: id};

so that is pass all instances of the data.

anyone?