Question

查看页面

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

JS

$(document).ready(function(){
$('#compare_button').click(function(event){
    $.ajax({
        type: 'POST',
        url: 'compare.php',
        dataType: 'json'
    })
    .done(function(response){       
        ...
        $("#sourceResponse").html(some-response); 
        $("#destResponse").html(some-response);  
        $("#missingResponse").html(some-response); 
    });
});

Compare.php

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

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

Answer 1

构建一个包含您的回复的数组，json_encode并在回复中将其返回

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

基本上我们正在迭代response.source个对象成员并构建<code>string</code></br>并将它们附加到div，而不是直接推送对象的内容。

Answer 2

这是最短的方式：

var ComponentTwo = React.createClass({
getInitialState: function(){
   return {"insert":false};
},
handleClick : function(){
    this.setState({"insert":true});
},
render: function() {
    var view;
    if(this.state.insert)          {
      view = <ComponentOne />;
    }

    return <div className="card">
        <h2>Component Two</h2>
        <button onClick={this.handleClick} >INsert </button>
        {view}    
    </div>
}
});

在PHP Ajax帖子中，如何使用单个ajax调用获取对多个html元素的数组响应

2 个答案: