php - 单击从 mysql 加载到表中

Question

当用户单击提交按钮时，我能够将 5 个表单中的数据输入到 mysql 中。

现在，我想在用户单击不同的按钮时在表中显示数据。我知道我需要使用 Ajax 和 Php，但我一直找不到一个对我来说清楚的示例。

我的部分代码如下。我没有包含用于将表单数据发布到数据库的 javascript 和 php。如果这对你理解有帮助，我可以添加它。

input.html

<div class="container">
<form action="vocab_input.php" method="post" id="input_form">
<label>Word:</label>  
    <input type="text" name='word'>

  <label>POS:</label>
    <input type="text" name='pos'>

  <label>Translation:</label>
    <input type="text" name='trans'>

  <label>Definition:</label>
    <input type="text" name='definition'>

  <label>Sentence:</label>
    <input type="text" name='sen'>

  <input type="submit">

 </form>
 </div>

<div class="btn-group btn-group-justified" role="group" aria-label="..." style="margin-top: 50px;">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default" id="list">Vocab List</button>
  </div>
</div>

<-- I want the table displayed here when user clicks the list button -->

get_input.js

$(function() {
    $('#list').on('click', function(e) {
        var data = $("#list :input").serialize();
        $.ajax({
            type: "GET",
            url: "get_input.php",
            data: data,
        });
        e.preventDefault();
    });
});

get_input.php

<?php

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "dbname";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT * FROM user_input";
$result = $conn->query($sql);

while ($row = mysql_fetch_array($result)) {
    echo '<tr>';
    foreach($row as $field) {
        echo '<td>' . htmlspecialchars($field) . '</td>';
    }
    echo '</tr>';
}

$conn->close();
?>

Answer 1

需要表格的 HTML 创建一个基本表格元素来插入数据。

<table id="mydata"></table>

PHP 不是回显每一行，而是创建一个返回数组，然后打印该数组 json 编码。

$return = array()
while ($row = mysql_fetch_array($result)) {
    foreach($row as $field) {
        $return[] = '<td>' . htmlspecialchars($field) . '</td>';
    }
}

print(json_encode($return));

js调用成功函数中的JS，迭代返回的json并创建一个新的html变量。然后使用该新变量设置您在上面的 HTML 部分中创建的表的 html。

$(function() {
    $('#list').on('click', function(e) {
        var data = $("#list :input").serialize();
        $.ajax({
            type: "GET",
            url: "get_input.php",
            data: data,
            dataType: "json",
            success: function(data) {
              var html;
              if(data) {
                for(var i=0; i < data.length; i++) {
                  html += "<tr>data[i]</tr>";
                }
                $("#mytable").html(html);
              }
            }
        });
        e.preventDefault();
    });
});

这完全是我的想法，未经测试，但假设所有其他函数都返回正确的数据，它应该可以工作。

根本没有错误处理，基本上我通常做的就是不返回 $return，而是将所有数据放入 $return["data"] 数组中，然后如果 PHP 函数错误返回 $return["error"]，然后在 js 中代替 if(data) 可以执行 if(data.error !="") 或类似的操作。