在PHPAJAX post中，如何通过一个Ajax调用获得对多个html元素的数组响应

查看页面

<button id = 'compare_button'>Compare</button>
<div id="sourceResponse"></div> 
<div id="destResponse"></div>   
<div id="missingResponse"></div>

Compare.php

....
//converting arrays to json
echo json_encode($source_files);
echo json_encode($dest_files);
echo json_encode($missing_files);

---

如何处理上面的json响应，以便在这3个html元素中显示相应的数据？

构建一个包含您的响应的数组，

json\u编码它，并在响应中返回它

$output = array(
    'source'  => $source_files,
    'dest'    => $dest_files,
    'missing' => $missing_files
);

echo json_encode($output);

在javascript中，如下所示使用它：

.done(function(response){       
    ...
    $("#sourceResponse").html(response.source); 
    $("#destResponse").html(response.dest);  
    $("#missingResponse").html(response.missing); 
});


编辑：

在
done
处理程序中

// replace this
// $("#sourceResponse").html(response.source);

// with the following
$.each(response.source, function(key,value) {
    console.log(key+"-"+value); // use this to check the object

    // assuming the text you want is directly in the value you can use this
    $("#sourceResponse").append('<code>'+value+'</code></br>');
})

基本上，我们正在迭代
响应。源
对象成员，构造
字符串
，并将其附加到
div
，而不是直接推送对象的内容。
这是最短的方法：

echo json_encode([
    "sourcefiles" => $source_files,
    "destfiles" => $dest_files,
    "missingfiles" => $missing_files
]);

console.log(response.sourceFiles);
console.log(response.destFiles);
console.log(response.missingFiles);

大家好，欢迎来到Stack Overflow。在这里，我们希望您自己尝试一下代码，然后在遇到困难时我们会帮助您。为什么不向我们展示一下您为解决此问题所做的尝试（即使不起作用）？$source\u files、$dest\u files、$missing\u files是包含数千个元素的大型数组，每个元素都是文件路径。创建一个具有3个属性的对象，并将数组存储在其中，然后执行
echo json\u encode（$yourObject）谢谢。我们可以将每个响应存储到数组中，并在查看页面中使用foreach循环显示元素吗？我想做如下操作-
foreach（$response\u source as$key=>$value）{？>

如果您能分享一些上下文代码，我可能会有所帮助，我不确定我是否理解您的意思。如果您关闭在
foreach
上打开的括号，您评论中的代码应该可以工作。我希望html输出采用这种形式
test1

test1


..
。我们如何做到这一点？初始
$source\u文件
数组中是否包含值“test1”？请编辑您的问题，以包含每个数组的小样本。我想我了解您需要什么，但样本总是有帮助的：）
echo json_encode([
    "sourcefiles" => $source_files,
    "destfiles" => $dest_files,
    "missingfiles" => $missing_files
]);

console.log(response.sourceFiles);
console.log(response.destFiles);
console.log(response.missingFiles);