如何在不使用 php 重新加载/刷新当前页面的情况下显示 mysql 记录？答案

【问题标题】：How to redisplay mysql records without reloading/refresing the current page using php?如何在不使用 php 重新加载/刷新当前页面的情况下显示 mysql 记录？
【发布时间】：2017-12-06 15:45:47
【问题描述】：

所以这是场景：

下面的代码显示所有用户帐户。

<table border="3px" align="center" cellspacing="3px" cellpadding="3px">
<tr>
<td>Username</td>
<td>Password</td>   
<td><a href="" onclick='return popup_link()'>Add</a></td>       
</tr>
<?php
include("connection.php");
$query=mysql_query("select * from tbl_users");
while($row=mysql_fetch_array($query)){
?>
<tr>
<td><?php echo $row['username']; ?></td>
<td><?php echo $row['password']; ?></td>
<td></td>
</tr>
<?php
}
?>
</table>

然后我有一个弹出页面，它可以将用户帐户添加到数据库表用户帐户中，而无需重新加载页面本身。

<form id="form">
<h3>Add Record</h3>
<label>Username:</label>
<br/>
<input type="text" id="username" placeholder="Userusername"/>
<br/>
<br/>
<label>Password:</label>
<br/>
<input type="password" id="password" placeholder="Password"/>
<br/>
<br/>
<input type="button" id="submit" value="Submit"/>
</form>


<?php
// Establishing connection with server by passing "server_name", "user_id", "password" 
$connection = mysql_connect("localhost", "root", "");
// Selecting Database by passing "database_name" and above connection variable
$db = mysql_select_db("smsi_inventory", $connection);

//Fetching Values from URL  
$username2=$_POST['username1'];
$password2=$_POST['password1'];

//Insert query 
$query = mysql_query("insert into tbl_users(username, password) values ('$username2','$password2')");
if($query){
echo "Record Saved succesfully";
}

//connection closed
mysql_close($connection);
?>

但是，如果不重新加载/刷新页面，我很难显示新添加帐户的记录。有没有办法可以使用 php 显示新添加的帐户？

我们非常感谢您的帮助。谢谢！

【问题讨论】：

您必须为此使用 AJAX 并继续使用计时器检查数据库中添加的任何新记录。
表单提交后可以使用ajax/jquery。它会在您不刷新页面的情况下显示帐户。
您好，感谢您的快速回复。那么我会使用 AJAX 来显示记录吗？而不是一个简单的 PHP 代码？那么，我没有办法在不重新加载的情况下使用 PHP 来显示记录吗？
不行，没有别的办法。 PHP 在服务器上执行一次，结果被发送到浏览器，现在服务器完成处理您的请求。从 MySQL 数据库读取新数据需要另一个 PHP 请求，通过重新加载整个页面或 AJAX 调用
好的！知道了！感谢您的所有帮助和支持。你有一个美好的一天:)

标签： php html css mysql

【解决方案1】：

尝试执行异步 HTTP (Ajax) 请求。

$.ajax({
    type:'POST',
    url:'YOUR UPDATE DATA URL',
    data:{your:data},
    success:function(data){
      //WHATEVER YOU SHOW ON SUCCESS
    },
    error: function (jqXHR, exception) {
      alert("Parse Errore");
    }
});

更多信息请阅读http://api.jquery.com/jquery.ajax/

【讨论】：

【解决方案2】：

试试这个

mysql 已弃用，您必须使用 mysqli

几天前我实现了这段代码。我正在与您分享示例，您必须在代码中实现此代码对我有用。

您必须将数据提交到数据库并在表格中显示该数据而不刷新页面。对吧？

你必须使用 ajax 并且在成功函数中，你必须使用 tr: last 并重置表格。

<?php
ob_start();
session_start();
include('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;" id="myTable">
<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)
                {
                    $('#myTable tr:last').after('<tr><td></td><td>' +fname +'</td><td>'+lname+'</td><td>'+email+'</td></tr>');
                    $("#register")[0].reset();
                },
            });
        });
</script>
</body>
</html>

【讨论】：