Question

我试图弄清楚如何获取JSON结果并将其显示在我构建的模板中。

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

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

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

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);
?>

Answer 1

这里发生了几件事。

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);

Answer 2

尝试对这些参数使用stringify方法：

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

在网页中整洁地显示JSON结果

2 个答案: