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

时间:2017-12-06 07:10:28

标签: php html css mysql

所以这是场景:

以下代码显示所有用户帐户。

<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显示新添加的帐户?

非常感谢您的帮助。谢谢!

2 个答案:

答案 0 :(得分:0)

尝试执行异步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/

答案 1 :(得分:0)

试试这个

不推荐使用

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>