Javascript 在网页中整齐地显示JSON结果

我试图弄清楚如何获得JSON结果并在我构建的模板中显示它们

我有一个带有复选框的页面，当复选框被选中时，脚本会细化搜索。到目前为止，我已经创建了一个脚本来检查用户是否选中了一个复选框。然后，一个单独的PHP脚本在SQL数据库上运行一个查询——实时返回结果

到目前为止，我已经设法让它在控制台中以JSON的形式返回结果，并在网页中“字符串化”

如何获取JSON结果并将其整齐地显示在网页上？i、 e

Name: 'name', Locale: 'locale'
Name: 'name', Locale: 'locale'
Name: 'name', Locale: 'locale'

这是我目前的Ajax代码：

var ajaxResult=[];
function updateEmployees(opts){
$.ajax({
type: "POST",
url: "search.php",
dataType : 'json',
cache: false,
data: {filterOpts: opts},
success:function(data)      {
        ajaxResult.push(data);
     }
});
}

这是javascript复选框代码：

var $checkboxes = $("input:checkbox");
$checkboxes.on("change", function(){
var opts = getEmployeeFilterOptions();
updateEmployees(opts);

console.log(ajaxResult)
var myJSON = JSON.stringify(ajaxResult);
document.getElementById("demo").innerHTML = myJSON;

});
updateEmployees();

提前谢谢你的帮助。我花了几天时间想弄明白

编辑-我正在使用的PHP脚本

<?php
$pdo = new PDO('mysql:host=localhost;dbname=myDB', '**', '**');
$select = 'SELECT name, locale, website';
$from = ' FROM theList';
$where = ' WHERE TRUE';
$opts = isset($_POST['filterOpts'])? $_POST['filterOpts'] : array('');
if (in_array("pub", $opts)){
$where .= " AND pub = 1";
}
if (in_array("bar", $opts)){
$where .= " AND bar = 1";
}
if (in_array("restaurant", $opts)){
$where .= " AND restaurant = 1";
}
if (in_array("club", $opts)){
$where .= " AND club = 1";
}
if (in_array("locale-a", $opts)){
$where .= " AND locale = 'south'";
}
if (in_array("locale-b", $opts)){
$where .= " AND locale = 'west'";
}

$sql = $select . $from . $where;
$statement = $pdo->prepare($sql);
$statement->execute();
$results = $statement->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($results);
echo($json);
?>

---

尝试对以下参数使用stringify方法：

var myJSON = JSON.stringify(ajaxResult, null, 2);

这里发生了几件事

1。在将新元素推送到结果数组后，每次复选框更改时，结果集都会增加。如果每次都要获取完整的数据集，那么这是不必要的

2.AJAX是异步执行的，编写代码时希望它是同步的

这个

console.log(ajaxResult)
var myJSON = JSON.stringify(ajaxResult);
document.getElementById("demo").innerHTML = myJSON;

});
updateEmployees();

…正在等待尚未存在的数据

过程如下：

*用户单击复选框*

将选择提交到服务器以查询数据库

等待回应

收到响应时处理结果

但是，在步骤3完成之前，上述代码已经在步骤4中。您需要告诉ajax调用在收到响应时要做什么：

// send selections to server
function updateEmployees(){
    $.ajax({
        type: "POST",
        url: "search.php",
        dataType : 'json',
        cache: false,
         // serialize checked boxes to a query string like "check1=on&check2=on"
        data: $('input:checkbox').serialize(),
        success: handleResults
    });
}

// handle filtered results
function handleResults(data) {
    // same as document.getElementById('demo').innerHTML
    $('#demo').html(
        JSON.stringify(data)
    );
}

// add events to checkboxes
$('input:checkbox').change(updateEmployees);

谢谢你的帮助。它仍然不起作用。。。我已经添加了我正在使用的PHP脚本-如果您能够再看一看的话<代码>在数组中

需要是

数组\u键\u存在

。