Javascript 如何在屏幕上显示新记录而不刷新页面?
我必须在屏幕上显示所有插入数据库的记录,而不刷新页面。我有三个列,分别是Firstname、Lastname、Email,点击提交按钮后,数据将使用ajax插入数据库,ajax正在工作 现在,我在同一屏幕上获取记录,而不刷新页面,但当我刷新页面时,它不工作,然后它显示插入的最后一条记录 请查看下面的链接。你会知道我在问什么。同时插入数据和显示数据 Index.phpJavascript 如何在屏幕上显示新记录而不刷新页面?,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我必须在屏幕上显示所有插入数据库的记录,而不刷新页面。我有三个列,分别是Firstname、Lastname、Email,点击提交按钮后,数据将使用ajax插入数据库,ajax正在工作 现在,我在同一屏幕上获取记录,而不刷新页面,但当我刷新页面时,它不工作,然后它显示插入的最后一条记录 请查看下面的链接。你会知道我在问什么。同时插入数据和显示数据 Index.php <?php ob_start(); session_start(); include('../../db/connecti
<?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>
$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();
身份证件
名字
姓氏
电子邮件
$('#register')。提交(函数(e){
e、 preventDefault();//防止默认提交
var fname=$(“#fname”).val();
var lname=$(“#lname”).val();
var email=$(“#email”).val();
var dataString='fname='+fname+'&lname='+lname+'&email='+email;
$.ajax(
{
url:'process.php',
类型:'POST',
数据:dataString,
成功:功能(数据)
{
//$(“#表容器”).html(数据);
$(“#寄存器”)[0]。重置();
},
});
});
Process.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>
$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();
$firstname=$\u POST['fname'];
$lastname=$\u POST['lname'];
$email=$_POST['email'];
$sql=“插入test1(fname、lname、email)值(“$firstname”、“$lastname”、“$email”)”;
if(mysqli_查询($conn,$sql)){
echo“新记录创建成功”;
}否则{
echo“Error:”.$sql.
“.mysqli_Error($conn);
}
$conn->close();
$('IdTable tr:last')。在('idfnamelnameemail')之后;
为表定义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();
},
});
$.ajax(
{
url:'process.php',
类型:'POST',
数据:dataString,
成功:功能(数据)
{
$('#myTable tr:last')。在(''+fname+''+lname+''+email+'')之后;
$(“#寄存器”)[0]。重置();
},
});
注意:如果在代码中插入eror,您也应该处理这种情况,因为当前您只接受肯定的情况
我希望这会有所帮助首先,我想建议大家看看mysqli,让您的查询更安全 然后,为了添加日期而不刷新,您可以在成功插入时返回数据。然后将这些数据保存到表中 示例Process.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 {
if(mysqli_查询($conn,$sql)){
回声“
“.mysqli_insert_id($conn)。”
“$firstname。”
“$lastname。”
“$email。”
";
}否则{
因为只有一个表,所以请使用下面的代码
$('table tr:last').after('<tr>...</tr><tr>...</tr>');
$('table tr:last')。在('…')之后;
如果您有任何类或id,则可以将下面的语法修改为$('selector tr:last')
在ajax调用的成功中使用它谢谢您的回复,但我应该在哪里使用它?在成功的过程中,我尝试了您的代码,记录正在插入数据库,但刷新页面后显示在屏幕上是的,它正在工作。我这边也有同样的问题。但是id是自动递增的,不显示。可以吗你在这方面能帮我吗?你正在显示在$result中获取和存储的数据。通过ajax提交表单时,你没有刷新页面。因此$result只存储以前的数据。感谢回复Naincy,我尝试了,但它不起作用。我尝试了你的代码,记录正在插入数据库中,但刷新页面后会显示在屏幕上