Javascript 如何使用AJAX调用返回的数据创建或填充表

我有一个网页，让用户输入搜索，当他们输入搜索时，我希望PHP脚本返回的数据显示为搜索区域下方的表格。我的AJAX调用成功地调用了成功检索数据的PHP脚本。但是，不会显示HTML元素/数据。生成HTML元素的正确方法是什么？让PHP脚本生成它们是正确的方法，还是可以将结果传递到某个JavaScript函数中，而该函数将创建元素

$sql = "SELECT supplierName, about FROM suppliers";

if ($res = mysqli_query($myConnection, $sql)) {
    if (mysqli_num_rows($res) > 0) {
        echo "<table>";
        while ($row = mysqli_fetch_array($res)) {
            //error_log('row');
            echo "<tr>";
            echo "<td>".$row['supplierName']."</td>";
            echo "<td>".$row['about']."</td>";
            echo "</tr>";
        }
    }
    echo "</table>";
}
mysqli_close($myConnection);

是的，这是可能的

添加

success:function（data）{}

其中

data

是已定义的变量has value是

结果

您可以使用此变量执行函数：

$.ajax({
    type: "POST",
    url: "searchQuery.php",
    data: {submit:submit, type: type, grade:grade, organic:organic, price: price, name: name},
   success: function(data) {
    console.log('query submitted');
    document.querySelector("main")[0].append(data);
    }
  });

---

回答您的第一个问题：元素不会显示，因为它们发生在“异步JavaScript和XML”调用（AJAX）中，该调用发生在您的页面之外，您在调用该调用后唯一要做的事情是：

console.log('query submitted');

您需要以某种方式将信息发送回您的页面，最容易掌握的方法是使用PHP返回JSON（或XML，如果您喜欢的话），如下所示：

PHP:

然后可以使用javascript根据返回的json生成表，如下所示：

JAVASCRIPT:

success: function(data) {
    var myTable = document.getElementById('myTable');
    for (i in data) {
        var tr = myTable.appendChild(document.createElement('tr'));
        for (key in data[i]){
            var td = tr.appendChild(document.createElement('td'));
            td.title = key;
            td.innerHTML = data[i][key];
        }
    }
}

HTML

---

//此处显示数据您的AJAX调用代码在哪里？您的html表单代码在哪里，请与我们联系。谢谢！这很有帮助。我会对你的答案投赞成票，但我需要15次重复投票，因为这是你的问题，我认为你可以选择它作为公认的解决方案。很乐意帮忙。
console.log('query submitted');

if (mysqli_num_rows($res) > 0) {
    $table= array();
    while ($row = mysqli_fetch_array($res)) {
        array_push($table,array(
            'supplierName'=>$row['supplierName'],
            'about'=>$row['about']
        ));
    }
    echo json_encode($table)
}

success: function(data) {
    var myTable = document.getElementById('myTable');
    for (i in data) {
        var tr = myTable.appendChild(document.createElement('tr'));
        for (key in data[i]){
            var td = tr.appendChild(document.createElement('td'));
            td.title = key;
            td.innerHTML = data[i][key];
        }
    }
}

//data displays here <-
<table id="myTable"></table>