使用 jQuery ajax POST 接收多个数据答案

【问题标题】：Receiving multiple data with jQuery ajax POST使用 jQuery ajax POST 接收多个数据
【发布时间】：2023-03-29 01:10:01
【问题描述】：

我正在使用 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 获取数据，因为我正在使用依赖选择框并从数据库中获取数据。因此，通过单击选择 1，它会从数据库中获取选择 2 的数据，这就是我这样做的原因。

【问题讨论】：

为什么是-1？我问错了什么？
我想了解你为什么这样做，有什么意义？
因为我使用依赖选择框并从数据库中获取数据。因此，通过单击选择 1，它会从数据库中获取选择 2 的数据，这就是我这样做的原因。

标签： javascript php jquery ajax

【解决方案1】：

你可以在你的 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);
}

【讨论】：

【解决方案2】：

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);
    }           
});

【讨论】：

【解决方案3】：

要分离返回的数据，您将需要使用不同的格式来返回数据 - 目前，它返回的只是

<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]);
  }
}

【讨论】：

【解决方案4】：

用两个不同的数组索引构造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);
}

【讨论】：

【解决方案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)
            }
        );
    }
});

你可以用 json. （我没有测试过）。

【讨论】：

【解决方案6】：

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]);
}

【讨论】：