[英]Receiving multiple data with jQuery ajax POST
我正在使用ajax獲取數據並填充一個選擇框。 在以下代碼中,我在ajax.php文件上回顯輸出,並將其接收。 一切正常。 但是,如您所見,所有html都填充在一個選擇框中。 我想返回兩個單獨的選擇框而不是一個的數據。
因此,我的問題是,如何從ajax.php分別發送兩種不同類型的數據,以及如何在成功函數中接收它。
$.ajax({
type: "POST",
url: "../ajax.php",
data: {name: 'select1', id: id},
cache: false,
success: function(html){
$(".select1").html(html);
}
});
Ajax.php僅回顯數據:
//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();
並希望收到以下內容:
success: function(html){
$(".select1").html(data1);
$(".select2").html(data2);
}
編輯:我正在使用ajax來獲取數據,因為我正在使用從屬選擇框並從數據庫中獲取數據。 因此,通過單擊select 1,它將從數據庫中獲取select 2的數據,這就是我這樣做的原因。
您可以在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);
}
用兩個不同的數組索引two diffrent select options in php
構造two diffrent select options in php
//select1
$data['first'] = '<option>first</option>'; // loop for more data
//select2
$data['second'] = '<option>second</option>';
回聲json_encode($data);
並成功地收到並相應地展示。
success: function(data){
var data = JSON.parse(data);
$(".select1").html(data.first);
$(".select2").html(data.second);
}
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);
}
});
為了分隔返回的數據,您將要使用其他格式來返回數據-目前,返回的所有內容是
<option>x</option>
<option>x</option>
<option>x</option>
<option>y</option>
<option>y</option>
<option>y</option>
不能由瀏覽器分隔。 如果將其編碼為JSON,則可以使其返回
{
select1: [
"<option>x</option>",
"<option>x</option>",
"<option>x</option>"
]
select2:
"<option>y</option>",
"<option>y</option>",
"<option>y</option>",
]
}
為此,您需要使用以下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);
和這個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]);
}
}
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)
}
);
}
});
您可以使用json沿上述方式進行操作。 (我還沒有測試過)。
傑森是最好的選擇。 即使您不想使用它,這里也有另一個選擇。
//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]);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.