JQuery 和 PHP：在一次 AJAX 调用中将数据添加到多个 div

Question

我有一个 HTML 表单，其中有一些复选框。在此表单下方，有一个 id="area1" 的空 div 和一个 id="area2" 的空 div。它们将填充 PHP 函数返回的数据（实际上，到目前为止，仅填充了 #area1）。

为此，我首先使用 jQuery 检索复选框的值（从 1 到 n）：

var value1 = $('#mybox1').prop('checked');
...
var valuen = $('#myboxn').prop('checked');

然后我使用 AJAX 调用将“valueX”变量传递给我的 PHP 脚本：

$.ajax({
        type: "GET",
        url: "process_function.php",
        data: { checkbox1 : value1 ... checkboxn : valuen},
        success: function(data){ 

        //add to div "area1" the retrieved data                     

        $('#area1').html(data);

        })

按下按钮时触发 AJAX 调用。

然后 process_function.php 分析数据，并在必要时调用位于 function.php 文件中的其他函数。这些函数总能呼应一些东西。

一切正常，但问题是结果被连接到同一个 div ：#area1 ！

所以我想知道我是否可以选择向哪个 DIV 添加给定数据。也就是说，在同一个 AJAX 调用中，是否有一种“优雅”的方式，如果选中 value1，则将一些数据添加到#area1，如果选中 value2，则将其他数据添加到 #area2，如果两个值都添加到两个区域被检查了，只有一个 PHP 函数？

到目前为止，我唯一的想法是创建一个 jQuery 函数来测试 value1 是否被选中，然后调用 process_function1.php，以此类推其他值。但它增加了 PHP 函数。

谢谢

Answer 1

您可以让您的 PHP 脚本返回一个 JSON 对象，jQuery $.ajax 方法会自动将其转换为 Javascript 对象。

PHP

<?PHP

// example data. The key values will become part of the jscript object //
$data = ["div1" => "blahblahblah", "div2" => "<i>Something</i>"];

// need this for it to be recognized by jQuery as JSON
header('Content-Type: application/json'); 

echo json_encode($data);

Javascript

$.ajax({...}).done(function(data){
    $("#area1").html(data.div1);
    $("#area2").html(data.div2);
});

Answer 2

<?PHP

// example data. The key values will become part of the jscript object //
$data = ["area1" => "blahblahblah", "area2" => "<i>Something</i>"];

// need this for it to be recognized by jQuery as JSON
header('Content-Type: application/json'); 

echo json_encode($data);

jQuery 代码

    $.ajax({...}).done(function(data){
       $.each(data, function(key, value) {
          $("#"+key).html(value);
    });

});

你也可以使用这个更动态的代码。