使用jQuery ajax POST接收多个数据

Question

I am using ajax to get the data and populate a select box. In the following code, I echo the output on the ajax.php file, and receive it. Everything works fine. However, as you can see that all of the html is populated in one select box. I want to return data of two separate select boxes instead of one.

Therefore my question is, how can I send two different type of data separately from ajax.php and how can I receieve it on success function.

$.ajax({
    type: "POST",
    url: "../ajax.php",
    data: {name: 'select1', id: id},
    cache: false,
    success: function(html){                
        $(".select1").html(html);
    }           
});

Ajax.php only echos the data:

//data for select1
foreach($rows as $row){ 
    echo '<option>x</option>';      
}

//I want to add another one for select2
foreach($rows1 as $row){    
    echo '<option>y</option>';      
}       
die();

and want to receive with something like:

success: function(html){                
    $(".select1").html(data1);
    $(".select2").html(data2);
}

Edit: I'm fetching the data using the ajax because I'm using dependent select boxes and fetching the data from the database. So by clicking at select 1, it fetches the data for the select 2 from database, that's why I'm doing that.

Answer 1

you could do some thing like this in your Ajax.php

//select1
$data['html1'] = NULL;
foreach($rows as $row){ 
    $data['html1'] .= '<option>x</option>';      
}
//select2
$data['html2'] = NULL;
foreach($rows1 as $row){    
   $data['html1'] .= '<option>y</option>';      
}  
$resonse = json_encode($data);
echo $response;
//JQUERY MAKE SURE THAT ITS OF TYPE JSON.
success: function(response){                
    $(".select1").html(response.html1);
    $(".select2").html(response.html2);
}

Answer 2

construct two diffrent select options in php with two different array indexes like this

//select1
    $data['first'] = '<option>first</option>';   // loop for more data    
//select2
   $data['second'] = '<option>second</option>';      

echo json_encode($data); and recieve it in success and show accordingly.

success: function(data){
  var data = JSON.parse(data);
  $(".select1").html(data.first);
  $(".select2").html(data.second);
}

Answer 3

foreach($rows as $row){ 
    $selects['select1'] = '<option>x</option>';      
}

foreach($rows1 as $row){    
    $selects['select2'] = '<option>y</option>';      
}    

print_r(json_encode($selects));

die();

$.ajax({
    type: "POST",
    url: "../ajax.php",
    success: function(data){          
        $(".select1").html(data.select1);
        $(".select2").html(data.select2);
    }           
});

Answer 4

To separate the data that is returned, you are going to want to use a different format to return the data - at the moment, all it returns is

<option>x</option>
<option>x</option>
<option>x</option>
<option>y</option>
<option>y</option>
<option>y</option>

which cannot be separated by the browser. If you encode it as JSON, you can make it return

{
  select1: [
    "<option>x</option>",
    "<option>x</option>",
    "<option>x</option>"
  ]
  select2: 
    "<option>y</option>",
    "<option>y</option>",
    "<option>y</option>",
  ]
}

To do this, you need to use this php:

$select1 = array();
foreach($rows1 as $row){
  array_push($select1, $row);
}
$select2 = array();
foreach($rows2 as $row){
  array_push($select2, $row);
}
echo json_encode(array('select1' => $select1, 'select2' => $select2), JSON_FORCE_OBJECT);

and this javascript:

success: function(data){
  var decoded = JSON.parse(data);
  for (var l = 0; l < decoded.select1.length; l++){
    $(".select1").append(decoded.select1[l]);
  }
  for (var l = 0; l < decoded.select2.length; l++){
    $(".select2").append(decoded.select2[l]);
  }
}

Answer 5

var json_post = [ 
    { "id" : "1", "name" : "test1" },
    { "id" : "2", "name" : "test2" }
];

$.ajax({
    type: "POST",
    url: "../ajax.php",
    data: json_post,
    cache: false,
    dataType: 'json',
    success: function(data){                
        var json = $.parseJSON(data);
        $.each(
            json,
            function(i, val){
                $(".select"+val.id).html(val.name)
            }
        );
    }
});

You could do something along the above lines with json. (I haven't tested it).

Answer 6

Json is the best choice. even if you don't want to use that, then another option is here.

//select1
$data = "";
foreach($rows as $row){ 
    $data .= '<option>x</option>';      
}
$data .= "^^^"; // you can use any separator
//select2

foreach($rows1 as $row){    
   $data .= '<option>y</option>';      
}  

echo $data;

success: function(response){
    var options = response.split("^^^");

    $(".select1").html(options[0]);
    $(".select2").html(options[1]);
}