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

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

});

Jquery代码

paper-drawer-panel.css:32:48

您也可以使用此代码，这更具动态性。

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

2 个答案: