【发布时间】：2020-04-07 20:34:00
【问题描述】：
我在使用 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>
ajax 代码
<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>";
我没有想法，所以任何帮助将不胜感激。
【问题讨论】：
-
您的 HTML 文件的名称是什么？表格和表格在同一页吗？
-
提交表单数据时，是否希望在同一页面上看到表单和表格？
-
没有那部分确实有效，因为我回显了数据以查看它是否正在发送
-
是的，表格和表格在同一页上
-
或者数据是否保存到您的数据库但没有显示在 HTML 表中？我问这些问题是为了不给出错误的答案。