mysql 中的所有内容都只打印到 html 表中的一个单元格答案

【问题标题】：Everything in mysql is printing to only one cell in html tablemysql 中的所有内容都只打印到 html 表中的一个单元格
【发布时间】：2017-04-14 14:41:05
【问题描述】：

当我从 mysql 打印数据时，所有内容都进入第一行的一个单元格，而不是分散在整个 html 表中。

我已将我编写的所有代码包含在下面，但问题出在此页面底部的 get_input.js 和 get_input.php 文件中。

我该如何解决这个问题？

vocab_input.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script type="text/javascript" src="vocab_input.js"></script>
<script type="text/javascript" src="get_input.js"></script>

<style>
    th {
        text-align: center;
    }
    td {
        text-align: center;
    }
  form {
    margin-top: 50px;
  }
</style>

</head>
<body>
<!-- INPUT -->
<div class="container">
<h1></h1>
<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>

<!-- BUTTONS -->
<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 class="btn-group" role="group">
    <button type="button" class="btn btn-default">Matching</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Scrambled</button>
  </div>
</div>  

<!-- OUTPUT -->
<table class="table">
  <tr>
    <th>Word</th>
    <th>Part of Speech</th>
    <th>Translation</th>
    <th>Definition</th>
    <th>Sentence</th>
  </tr>
  <tr>
    <td id="mytable"></td>
  </tr>
</table>

</body>
</html>

vocab_input.js

$(function() {
    $('#input_form').on('submit', function(e) {
        var data = $("#input_form :input").serialize();
        $.ajax({
            type: "POST",
            url: "vocab_input.php",
            data: data,
        });
        e.preventDefault();
    });
});

vocab_input.php

<?php

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

$word = $_POST['word'];
$pos = $_POST['pos'];
$trans = $_POST['trans'];
$definition = $_POST['definition'];
$sen = $_POST['sen'];

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

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

// Insert data 
$sql = "INSERT INTO user_input (word, pos, trans, definition, sen)
VALUES ('$word', '$pos', '$trans', '$definition', '$sen')";
$conn->query($sql);

$conn->close();
?>

这就是问题所在：

get_input.js

$(document).ready(function(){
    $("#list").click(function(){

      $.ajax({
        type: 'GET',
        url: 'get_input.php',
        success: function(data) {
          $("#mytable").text(data);
        }
      })
    })
})

get_input.php

<?php

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

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

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

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

while ($row = mysqli_fetch_assoc($result)) {
    foreach($row as $field) {
        echo htmlspecialchars($field);
    }
}

$conn->close();
?>

【问题讨论】：

您的代码容易受到SQL injection attacks 的攻击。您应该使用mysqli 或PDO 带有绑定参数的预准备语句，如this post 中所述。
谢谢。刚刚学习，所以我会在路上看看。

标签： php html mysql ajax mamp

【解决方案1】：

将 html 更改为：

<table class="table">
  <tr>
    <th>Word</th>
    <th>Part of Speech</th>
    <th>Translation</th>
    <th>Definition</th>
    <th>Sentence</th>
  </tr>
  <tr id="mytable">
  </tr>
</table>

还有 PHP：

while ($row = mysqli_fetch_assoc($result)) {
       echo '<td>'.htmlspecialchars($row[0]).'</td>';
       echo '<td>'.htmlspecialchars($row[1]).'</td>';
       echo '<td>'.htmlspecialchars($row[2]).'</td>';
       echo '<td>'.htmlspecialchars($row[3]).'</td>';
}

【讨论】：

这只是在表格中打印了一堆标签
测试一下：while ($row = mysqli_fetch_assoc($result)) { foreach($row as $field) { echo ''.htmlspecialchars($field).' '; } }