如何使网页页面和数据库同步刷新?用php,jsp什么的都可以

发布网友发布时间：2022-04-25 21:22

共6个回答

懂视网时间：2022-05-02 13:18

使用 PHP和前台Ajax 实现在前台对MySQL数据库中数据的增、删等操作语句功能。

如果有问题，欢迎拍砖~ 有不懂的地方，提出来咱们一起探讨~

首先，我们先做好前台HTML、CSS样式，代码如下：

<head>
 <meta charset="utf-8" />
 <title>主页</title>
 
 <style type="text/css">
  
  #table{  
  width:600px;
  margin: 20px auto;
  border-collapse: collapse;    
  }
  #table thead tr{
  height: 30px;   
  background-color: orange;
  color: white;    
  }
  
  #table tbody tr{
  height: 30px;   
  }
  
  #table th,td{  
  border: 1px solid black;
  }
  
  #table a{
  color: dodgerblue;
  cursor: pointer;
  }
  
 </style>
 </head>
 <body>
 <h1 align="center">用户管理系统</h1>
 <hr />
 <table id="table"> 
  <thead >
   <tr>
    <th>用户Id</th>
    <th>用户名</th>
    <th>密码</th>
    <th>真实姓名</th>
    <th>操作</th>
   </tr>
  </thead>

  <tbody></tbody>


  <tfoot> // 增加数据时使用 
   <tr>
   <td>
    <input type="text" name="userid" value="id无需输入" disabled="disabled"/>
   </td>
   <td>
    <input type="text" name="username"/>
   </td>
   <td>
    <input type="text" name="pwd" />
   </td>
   <td>
    <input type="text" name="truename" />
   </td>
   <td align="center">
    <input type="button" onclick="addUser()" value="新增用户" />
   </td>
   </tr>  
  </tfoot>
 </table>
　　</body>

接下来我们需要实现的功能是，在每次更改数据或者刷新页面的时候，都可以将数据库的数据显示到网页页面中。

我们做一个纯PHP文件，命名doshowUserList.php，文件中代码如下：

<?php
 
 header("Content-Type:text/html;charset=utf-8"); 
 include_once "mysql.php"; 　　// 为了便于后期操作，我们将绑定数据库的代码单独写在另一个PHP文件中，通过导入的方式引入。
 
 $sql = <<<sql　　　　　　　　// 准备SQL语句
 select * from `user`; 
sql;

 $res = mysqli_query($conn, $sql); // 执行SQL语句
 
 $arr=[];
 while($row=mysqli_fetch_assoc($res)){
 $arr[]=$row;
 }
 
 $json = json_encode($arr);
 
 echo $json;
 
 mysqli_free_result($res);
 mysqli_close($conn);

PHP连接数据库的PHP文件，命名为mysql.php,代码如下：

<?php
 
 header("Content-Type:text/html;charset=utf-8");
 
 define("HOST", "127.0.0.1");
 define("USERNAME", "root");
 define("PASSWOED", "");
 define("DBNAME", "mydatabase");
 define("CHARSET", "utf8");

　　// 连接数据库的同时，直接检测数据库连接是否成功

$conn = @mysqli_connect(HOST, USERNAME, PASSWOED, DBNAME) or die("数据库连接失败！<span style=‘color:red;‘>".mysqli_connect_error()."</span>");
 
　　 // 设置字符集编码 
 @mysqli_set_charset($conn, CHARSET) or die("字符集编码设置失败！");

后台的PHP文件写好以后我们需要在前台声明一个函数 getData()，在函数体内使用ajax引入doShowUserList.php,前台JS代码如下：

<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
  
  $(function(){ // 在文档DOM加载完后，就自动获取一遍数据 
  getData();
  });
 
 // 获取数据 html中显示tbody内容的代码 采用ES6的反引号``可以直接在``中按照H5的形式写代码，比拼串的写法更简洁、更容易看

  function getData(){
  $.post("admin/doShowUserList.php",function(data){
   var html = ``;
   for (var i = 0; i < data.length; i++) {
    var user = data[i];
    html += `
    <tr>      
     <td>${user.id}</td>
     <td>${user.name}</td>
     <td>${user.pwd}</td>
     <td>${user.trueName}</td>
     <td align = "center">
     <a onclick="delUser(${user.id})" href="">删除</a>
     </td>
    </tr>
    `; 
   }
   
   $("#table tbody").html(html);
  },"json");
  }
</script>

获取数据功能实现了，接下来我们实现增加数据的功能，按照上面的套路，我们首先新建一个PHP文件，命名为doAddUser.php，代码如下：

<?php
 header("Content-Type:text/html;charset=utf-8");
 
 include_once ‘mysql.php‘;
 
 // $_POST 取到前台对象user 的键名

$name = $_POST["username"];
 $pwd = $_POST["pwd"];
 $trueName = $_POST["trueName"];
 
 $sql = <<<sql 
 insert into `user` 
 values(null,"{$name}","{$pwd}","{$trueName}");
sql;


 $isOk = mysqli_query($conn, $sql);
 
 if($isOk){
 echo "true";
 }else{
 echo "false";
 }

在前台声明一个函数addUser() ,在函数体内使用ajax引入doAddUser.php,前台JS代码如下：

// 新增数据  
  function addUser(){
  
  if($("input[name = ‘username‘]").val()== "" || $("input[name = ‘pwd‘]").val()== "" || $("input[name = ‘truename‘]").val()== ""){
   alert("新增不可为空！请确认！");
   return;  
  }
  
  var user = {  
   "username" : $("input[name=‘username‘]").val(),
   "pwd" : $("input[name=‘pwd‘]").val(),
   "trueName" : $("input[name=‘truename‘]").val(),
  }
  
  $.post("admin/doAddUser.php",user,function(data){
   if (data == "false") {
    alert("新增用户失败！")
   } 
   getData(); 
   
  $("input[name=‘username‘]").val("");
  $("input[name=‘pwd‘]").val("");
  $("input[name=‘truename‘]").val("");
  
  });
 
  }

最后就是删除功能了，套路同上，新建一个doDelUse.php,在前台声明一个函数delUser(); 代码分别如下显示：

<?php
 
 header("Content-Type:textml;charset=utf-8");
 
 include_once "mysql.php";
 
 $id=$_POST["id"];
 
 $sql = <<<sql
 delete from `user` where id = {$id};
sql;

 $isOk = mysqli_query($conn, $sql);
 
 if($isOk){
 echo "true";
 }else{
 echo "false";
 }

// 删除数据 
  function delUser(id){
  
  $.post("admin/doDelUser.php",{"id":id},function(data){
   if (data == "true") {
   alert("删除成功！")
   } else{
   alert("删除失败！")   
   }  
   getData();  
  });
 
  }

最终，效果如下：

技术分享

数据库中的数据：

技术分享

PHP实现前台页面与MySQL的数据绑定、同步更新

标签：导入 inpu 3.1 content 通过 black javascrip 准备效果

热心网友时间：2022-05-02 10:26

主动同步也许需要用socket，很是麻烦，我也说不清
你可以用被动的方式，大致意思就是：页面定时询问数据库服务器，数据是否有修改，如果有修改，页面就更新自己的内容，如果无则不需要更改
为了保持页面效率性，你可以设置定时时间为每5秒-1分钟一次，或者更久，看内容的具体情况
为了省流量，你可以用个数据库变量来指示内容是否有变化，比如，数据更新的时间，这样每次页面只需要问下服务器最后数据更新的时间，就知道是否需要更新数据库，节省流量

热心网友时间：2022-05-02 11:44

如果你是初载一个页面：一般是先执行数据库的写操作，再通过读操作提取页面需要的动态信息。这样可以保证同步，但效率有损耗。
如果追求效率，在写操作的同时就把相关动态信息保存在变量中，后一步如果检测到变量中已有值，则不再询问数据库，直接输出到前台。如果变量是null，说明之前没有执行过更新操作，需要从数据库中读取信息。

如果你是在一个已打开页面上做更新：
用Ajax异步呼叫后台脚本执行数据库更新，然后返回执行完后的信息。前台对接收到的responseText解析后反应在页面上。

热心网友时间：2022-05-02 13:19

PHP，asp,都行，如果是静态页html，需要一个过程，当然有的网站后台可以设定缓存时间的，
做网站，

热心网友时间：2022-05-02 15:10

你可以使用ajax，不间断的请求服务器中新添加的数据，并插入到页面中

热心网友时间：2022-05-02 17:18

comet服务器推技术，可参考http://www.ibm.com/developerworks/cn/web/wa-lo-comet/

全部栏目

如何使网页页面和数据库同步刷新?用php,jsp什么的都可以