如何将mysql数据库中的数据插入到html文件的表中？

Question

我在使用 mysql 数据库中的数据添加新行时遇到问题。 现在它仅在此人提交新信息时才有效，但我想要做的是数据保留在 html 文件中，当有人输入新数据时，它只会更新 html 文件中的表格以获取这些新数据。

下面的 HTML 代码

<form id="form" method="POST" action="db.php">
            <div class="form-row">

                <div class="form-group col-md-3">
                            <label for="Name">Full Name of the Person: </label>
                            <input type="text" class="form-control" name="Name" id="Name" value="">
                </div>

                  <div class="form-group col-md-3">
                    <label for="Date">Birthdate: </label>
                    <input type="text"  name="Date" class="form-control" id="Date" placeholder="MM/DD/YY" value="">
                  </div>

                <div class="form-group col-md-3">
                        <label for="personPN">Phone Number: </label>
                        <input type="text" class="form-control" name="personPN" id="personPN" placeholder="(XXX)XXX-XXXX" value="">
                </div>
                <div class="form-group col-md-3">
                        <label for="Sex">Sex</label>
                          <select name="Sex" class="form-control" id="Sex">
                              <option selected>Choose</option>
                              <option value="F">Female</option>
                              <option value="M">Male</option>
                              <option value="U">Unknown</option>
                          </select>
                </div>
                <div class="form-group col-md-3">
                        <label for="Weight">Weight</label>
                        <input type="text" class="form-control" name="Weight" id="Weight" placeholder="Weight lbs" value="">
                </div>
                <div class="form-group col-md-3">
                        <label for="Height">Height</label>
                        <input type="text" class="form-control" name="Height" id="Height" placeholder="X'X" value="">
                </div>
                <div class="form-group col-md-3">
                  <label for="ECN">Emergency Contact Name: </label>
                  <input type="text" class="form-control" name="ECN" id="ECN" value="">
          </div>
          <div class="form-group col-md-3">
                  <label for="ECPN">Emergency Contact Name Phone Number: </label>
                  <input type="text" class="form-control" name="ECPN" id="ECPN" placeholder="(XXX)XXX-XXXX" value="">
          </div>

            </div>

                  <div class="form-group">
                        <label for="MedicalIssues">Medical Issues</label>
                        <textarea class="form-control" id="MedicalIssues" name="MedicalIssues" rows="3"></textarea>
                    </div>

            </div>

            <div class="form-row">
                    <div class="form-group col-md-12 text-right">
                        <button id="button" type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </div>
    </form>

阿贾克斯代码

<script type="text/javascript">
              $(document).ready(function(){
                $('#form').on('submit', function (e){
                  e.preventDefault();
                  var formData = $(this).serialize();

                  $.ajax({
                    type: "POST",
                    url: 'db.php',
                    data: formData,
                    success: function(data){
                      $('#test').append(data);
                      alert ("Saved Data");
                    }
                  })
                });
              });

PHP代码

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


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

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


$name = mysqli_real_escape_string($conn, $_POST['Name']);
$date = mysqli_real_escape_string($conn, $_POST['Date']);
$personPN = mysqli_real_escape_string($conn, $_POST['personPN']);
$sex = mysqli_real_escape_string($conn, $_POST['Sex']);
$weight = mysqli_real_escape_string($conn, $_POST['Weight']);
$height = mysqli_real_escape_string($conn, $_POST['Height']);
$ecn = mysqli_real_escape_string($conn, $_POST['ECN']);
$ecpn = mysqli_real_escape_string($conn, $_POST['ECPN']);
$medicalIssues = mysqli_real_escape_string($conn, $_POST['MedicalIssues']);

$sql = "INSERT INTO db (Name, Birthdate, PhoneNumber, Sex, Weight, Height, EmergencyContactName, EmergencyContactNamePhoneNumber, MedicalIssues) VALUES('$name', '$date', '$personPN', '$sex', '$weight', '$height', '$ecn', '$ecpn', '$medicalIssues')";

if($conn->query($sql) == TRUE){
    echo "New Record created successfully";
}else {
    echo "<br>";
    echo "Error: " . $sql . "<br>" . $conn->error;
    echo "<br>";
}

$input = "SELECT `Id`, `Name`, `Birthdate`, `PhoneNumber`, `Sex`, `Weight`, `Height`, `EmergencyContactName`, `EmergencyContactNamePhoneNumber`, `MedicalIssues` FROM `db`";

$result = $conn-> query($input);


echo "<table class='table'>";
echo "<thead>";
echo "<tr>";
echo "<th scope='col'>ID #</th>";
echo "<th scope='col'>Name</th>";
echo "<th scope='col'>Birthdate</th>";
echo "<th scope='col'>Sex</th>";
echo "<th scope='col'>Weight</th>";
echo "<th scope='col'>Height</th>";
echo "<th scope=col'>Phone Number</th>";
echo "<th scope='col'>Emergency Contact Name</th>";
echo "<th scope='col'>Emergency Contact Name Phone Number</th>";
echo "<th scope='col'>Medical Issues</th>";
echo "</tr>";
echo "</thead>";


if($result-> num_rows > 0){
    while ($row = mysqli_fetch_array($result)){
        echo "<tbody>";
        echo "<tr>";
        echo "<th scope=". $row['id'] ."</th>"; 
        echo "<td>". $row['Name'] ."</td>";
        echo "<td>". $row['Birthdate'] ."<td>";
        echo "<td>". $row['PhoneNumber'] ."<td>";
        echo "<td>". $row['Sex'] ."<td>";
        echo "<td>". $row['Weight'] ."<td>";
        echo "<td>". $row['Height'] ."<td>";
        echo "<td>". $row['EmergencyContactName'] ."<td>";
        echo "<td>". $row['EmergencyContactNamePhoneNumber'] ."<td>";
        echo "<td>". $row['MedicalIssues'] ."<td>";


    }
    echo "</tr>";
}
echo "</table>";

$conn->close();

我也试过在 html 文件中只包含（下面，没有像常规表一样的回声），但它没有像我上面那样放置信息。

echo "<table class='table'>";
echo "<thead>";
echo "<tr>";
echo "<th scope='col'>ID #</th>";
echo "<th scope='col'>Name</th>";
echo "<th scope='col'>Birthdate</th>";
echo "<th scope='col'>Sex</th>";
echo "<th scope='col'>Weight</th>";
echo "<th scope='col'>Height</th>";
echo "<th scope=col'>Phone Number</th>";
echo "<th scope='col'>Emergency Contact Name</th>";
echo "<th scope='col'>Emergency Contact Name Phone Number</th>";
echo "<th scope='col'>Medical Issues</th>";
echo "</tr>";
echo "</thead>";

我没有想法，所以任何帮助将不胜感激。

Answer 1

您的代码很复杂，您需要将数据库连接分开并包含在您的文件中。 并将您的列表查询和插入查询彼此分开。

定义变量并用空值初始化。 这些数组将防止您在表单中出现未定义的错误。

$name = "";
$date = "";

首先，您需要检查表单是否已提交

if($_SERVER["REQUEST_METHOD"] == "POST"){
// put all your insert code in here and do validating
}

在 html 部分添加字段值，以便当用户返回表单存在信息时

<input type="text" name="name" class="form-control" value="<?php echo $name; ?>">
<input type="text" name="date" class="form-control" value="<?php echo $date; ?>">

有关完整教程，请参阅此示例：

https://www.tutorialrepublic.com/php-tutorial/php-mysql-crud-application.php