如何使用JQuery $ .getJSON将数组从PHP文件发布到表中？

Question

我正在尝试根据用户输入的名为firstname的变量将数组输出到表中。如果两个数组具有相同的firstname值，则表应显示两个数组。目前，只有第一个数组显示在表中。我在下面列出了我当前的代码：

$(document).ready(function() {  
    var url = "data.php";

    $('#getJSON').click(function(event) {
        event.preventDefault();
        var firstname = $('#firstname').val();
        url = url + "?firstname=" + firstname;

        $.getJSON(url, function(json) {
            var tr;
            for (var i = 0; i < json.data.length; i++) {
                tr = $("<tr/>");
                tr.append("<td>" + json.data[0].id + "</td>");
                tr.append("<td>" + json.data[0].title + "</td>");
                tr.append("<td>" + json.data[0].firstname + "</td>");
                $('table').append(tr);
            }
        });
    });
});

PHP脚本：

if ($firstname === "Emma")
    $arr[] = array('id'=> "1", 'title'=> "Miss", 'firstname'=> "Emma", 'surname'=>"Brown");
else if ($firstname === "Emma")
        $arr[] = array('id'=> "2", 'title'=> "Mrs", 'firstname'=> "Emma", 'surname'=>"Green");
else
        $arr[] = array('id'=> "Unknown", 'title'=> "Unknown", 'firstname'=> "Unknown", 'surname'=> "Unknown");

echo '{"firstname":'.json_encode($arr).'}';

我希望它输出如下：

非常感谢任何帮助！

Answer 1

你有两个错误：

第一个是使用if子句。由于您使用if elseif，因此无法在if和elseif中添加相同的条件。else if表示如果之前的条件为false，则检查其他条件。在这种情况下，由于第一个条件为真，因此永远不会执行elseif。

其次，您始终将数据存储在结果数组的相同索引中，这样您将覆盖数据并始终在此数组中获取一个元素。

$id=1;
$arr=array();

if ($firstname === "Emma"){
    $arr[] = array('id'=> $id++, 'title'=> "Miss", 'firstname'=> "Emma", 'surname'=>"Brown");
    $arr[] = array('id'=> $id++, 'title'=> "Mrs", 'firstname'=> "Emma", 'surname'=>"Green");
 }

 else if($firstname === "NotEmma")
     $arr[] = array('id'=> $id++, 'title'=> "Miss", 'firstname'=> "NotEmma", 'surname'=>"xx");

 else
        $arr[] = array('id'=> "Unknown", 'title'=> "Unknown", 'firstname'=> "Unknown", 'surname'=> "Unknown");

echo '{"firstname":'.json_encode($arr).'}';

Answer 2

你可以试试这个：

var tr;
for (var i = 0; i < json.data.length; i++) {
    tr += "<tr>";
    tr += "<td>" + json.data[i].id += "</td>";
    tr += "<td>" + json.data[i].title += "</td>";
    tr += "<td>" + json.data[i].firstname += "</td>";
    tr += "</tr>";

}

$('table').html(tr);