如何在不刷新页面的情况下在屏幕上显示新记录？
Posted
技术标签:
【中文标题】如何在不刷新页面的情况下在屏幕上显示新记录？【英文标题】：How to display new records on screen without refreshing the page? 【发布时间】：2017-08-16 11:11:54 【问题描述】：我必须在屏幕上显示所有插入数据库的记录而不刷新页面。我有 3 列，分别称为 Firstname、Lastname、Email，点击提交按钮后，数据正在使用 ajax 插入数据库中。
现在我在同一屏幕上获取记录而不刷新页面，但是当我刷新页面时它不起作用，然后它显示插入的最后一条记录。
请检查以下链接。你会明白我在问什么。同时插入数据和显示数据。
http://prntscr.com/g953bs
Index.php
<?php
ob_start();
session_start();
include('../../db/connection.php');
$sql = "SELECT * FROM test1";
$result = $conn->query($sql);
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form method="post" id="register" autocomplete="off">
<input type="text" name="fname" id="fname" placeholder="Firstname">
<input type="text" name="lname" id="lname" placeholder="Lastname">
<input type="email" name="email" id="email" placeholder="Email">
<input type="submit" name="submit" value="submit" >
</form>
<table border="1" style="margin-top: 25px;">
<tr>
<th>Id</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
<?php
if ($result->num_rows > 0)
// output data of each row
while($row = $result->fetch_assoc())
echo "<tr>
<td>".$row['id']."</td>
<td>".$row['fname']."</td>
<td>".$row['lname']."</td>
<td>".$row['email']."</td>
</tr>";
else
echo "0 results";
$conn->close();
?>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#register').submit(function(e)
e.preventDefault(); // Prevent Default Submission
var fname = $("#fname").val();
var lname = $("#lname").val();
var email = $("#email").val();
var dataString = 'fname='+ fname + '&lname='+ lname + '&email='+ email;
$.ajax(
url:'process.php',
type:'POST',
data:dataString,
success:function(data)
// $("#table-container").html(data);
$("#register")[0].reset();
,
);
);
</script>
</body>
</html>
Process.php
$firstname=$_POST['fname'];
$lastname=$_POST['lname'];
$email=$_POST['email'];
$sql = "INSERT INTO test1 (fname, lname, email) VALUES ('$firstname', '$lastname', '$email')";
if (mysqli_query($conn, $sql))
echo "New record created successfully";
else
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
$conn->close();
【问题讨论】：
您正在显示获取并存储在 $result 中的数据。通过 ajax 提交表单时，您不会刷新页面。所以 $result 只存储以前的数据。 【参考方案1】：
$('#IdTable tr:last').after('<tr><td>id<td>fname<td>lname<td>email</tr>');
【讨论】：
感谢回复，请问应该在哪里使用呢？ 成功之道 我试过你的代码，记录正在插入数据库，但刷新页面后它显示在屏幕上 是的，它正在工作。我也有同样的问题。 但是 id 是自动递增的，没有显示。你能帮我吗？【参考方案2】：为表定义id
<table border="1" style="margin-top: 25px;" id="myTable">
ajax 调用的变化
$.ajax(
url:'process.php',
type:'POST',
data:dataString,
success:function(data)
$('#myTable tr:last').after('<tr><td>' +fname +'</td><td>'+lname+'</td><td>'+email+'</td></tr>');
$("#register")[0].reset();
,
);
注意：如果在插入代码时出现错误，您也应该处理这种情况，因为目前您只采用肯定的情况。
我希望这会有所帮助
【讨论】：
感谢 Naincy 的回复，我试过了，但它不起作用 我试过你的代码，记录正在插入数据库，但刷新页面后它显示在屏幕上【参考方案3】：首先，我建议您使用 mysqli 查看binding parameters，以节省您的查询。
然后为了在不刷新的情况下添加日期，您可以在成功插入时返回数据。然后append这个数据到表中。
示例流程.php
if (mysqli_query($conn, $sql))
echo "<tr>
<td>".mysqli_insert_id($conn)."</td>
<td>".$firstname."</td>
<td>".$lastname."</td>
<td>".$email."</td>
</tr>";
else
【讨论】：
【参考方案4】：由于您只有一张表，请使用以下代码。
$('table tr:last').after('<tr>...</tr><tr>...</tr>');
如果您有任何类或 id，那么您可以将以下语法修改为 $('selector tr:last')
在ajax调用成功时使用
【讨论】：
以上是关于如何在不刷新页面的情况下在屏幕上显示新记录？的主要内容，如果未能解决你的问题，请参考以下文章
如何在不刷新html页面的情况下在表格上显示数据（使用nodejs和mysql ajax）
在 Rails 4 中，如何在不刷新的情况下在页面上提交表单和更新元素