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！=“”）或类似的东西。

点击获取从mysql加载到表

1 个答案: