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

Question

我有一个网页，让用户输入搜索内容，当他们输入搜索内容时，我希望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);

注释掉的error_log输出预期的数量。

粗糙的HTML代码

    <head>
            <meta charset="utf-8">
        </head>
        <body>
            <main>
                <div id="searchQuery">
                    <form>
                        <form action="" method="post" id="form">
      <fieldset>
      <table>
        <tr>
          <td>
        Food Type*: 
        <select name = "type" id = "type" style="width:100%">
        <option value="Meat">Meat</option>
          <option value="Produce">Produce</option>
          <option value="Dairy">Dairy</option>
          <option value="Grain">Grain</option>
      </select>
          </td>
          <td>
            Price: <br>
            <select name = "price" id = "price" style="width:100%">
              <option value="none">None</option>
              <option value="Low to High">Low to High</option>
              <option value="High to Low">High to Low</option>
           </select>
          </td>
        </tr>
        <tr>
          <td>
        Food Grade*:
        <select name="grade" id="grade" style="width:100%">
        <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
          <option value="D">D</option>
          <option value="F">F</option>
      </select>
        </td>
        <td>
            Organic: 
            <select name="organic" id="organic" style="width:100%">
              <option value="Yes">Yes</option>
              <option value="No">No</option>
           </select>
          </td>
      </tr>
      <tr>
        <td>
        Supplier Name: <br>
        <input type="text" name="name" id="name" style="width:95%">
        </td>
        <td>
          <button  type="submit" id = "submit" class="button1" form="form" value="Submit" name="submit" style="width:50%">Submit</button>
        </td>
      </tr>
    </table>
   </form>
   </fieldset>
                    </form>
                </div>
                //data displays here <-
            </main> 

        </body>
    </html>

编辑：这是ajax调用/表单代码

'''

$(function() {
    $(".button1").click(function() {

      var type = $("select#type").val();
      var grade = $("select#grade").val();
      var organic = $("select#organic").val();
      var price = $("select#price").val();
      var name = $("input#name").val();

      var submit = $("button#submit").val();

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

Answer 1

对的，这是可能的

增加success: function(data){}其中data是已经定义的变量，其值是可以使用此变量执行功能的result ：

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

Answer 2

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

console.log('query submitted');

您需要以某种方式将信息发送回您的页面，最容易维护的方法是使用PHP返回具有以下内容的JSON（如果您是XML，则返回XML）：

PHP的：

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

然后，您可以使用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

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

一些相关链接：

如果您想进一步澄清，请随时添加任何评论。

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

问题描述

2 个解决方案

解决方案1
0 2019-07-26 05:13:51

解决方案2
0 2019-07-26 10:05:12

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

问题描述

2 个解决方案

解决方案1 0 2019-07-26 05:13:51

解决方案2 0 2019-07-26 10:05:12

解决方案1
0 2019-07-26 05:13:51

解决方案2
0 2019-07-26 10:05:12