当前位置:首页 > PHP教程 > php高级应用 > 列表

php+jQuery ajax实现的实时刷新显示数据功能示例

发布:smiling 来源: PHP粉丝网  添加日期:2021-12-17 16:43:30 浏览: 评论:0 

本文实例讲述了php+jQuery ajax实现的实时刷新显示数据功能,分享给大家供大家参考,具体如下:

创建数据表:demo

  1. -- 
  2. -- 表的结构 `demo` 
  3. -- 
  4. CREATE TABLE IF NOT EXISTS `demo` ( 
  5.  `id` int(11) NOT NULL AUTO_INCREMENT, 
  6.  `name` varchar(20) COLLATE utf8_bin NOT NULL, 
  7.  PRIMARY KEY (`id`) 
  8. ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=5 ; 
  9. -- 
  10. -- 转存表中的数据 `demo` 
  11. -- 
  12. INSERT INTO `demo` (`id`, `name`) VALUES 
  13. (1, '雷军'), 
  14. (2, '马化腾'), 
  15. (3, '李彦宏'), 
  16. (4, '马云'); 

服务器文件:demo.php

  1. <?php 
  2. $mysqli = new mysqli("localhost","root","","test"); 
  3. $mysqli->set_charset('utf8'); 
  4. $query = 'SELECT * FROM demo'
  5. $result = $mysqli->query($query); 
  6. $arr = $result->fetch_all(MYSQLI_ASSOC); 
  7. $info = json_encode($arr); 
  8. echo $json = '{"success":true,"info":'.$info.'}'

显示数据网页: fresh.html

  1. <html> 
  2. <head> 
  3.   <meta charset='utf-8'
  4.   <title>hello</title> 
  5. </head> 
  6. <body> 
  7. <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 
  8. <script> 
  9.   function check(){ 
  10.     $.ajax({ 
  11.       type:"GET"
  12.       url:"./demo.php"
  13.       dataType:"json"
  14.       success:function(data){ 
  15.         if(data.success){ 
  16.           var count = data.info.length; 
  17.             for(i=0;i<count;i++){ 
  18.               var dom = "<tr align='center' id='"+data.info[i].id+"'><td>"+data.info[i].id+"</td><td>"+data.info[i].name+"</td></tr>"
  19.               var tag = '#'+data.info[i].id; 
  20.               if(!$(tag).length){ 
  21.                 $("#info").append(dom); 
  22.               } 
  23.             } 
  24.         }else
  25.           alert('error'); 
  26.         } 
  27.       }, 
  28.       error:function(res){ 
  29.         alert(res.status); 
  30.       } 
  31.     }); 
  32.   } 
  33.   window.setInterval(check, 1000); //每秒执行一次 
  34. </script> 
  35. <body> 
  36.   <div style='width:600px;margin:0 auto;'
  37.     <table border='1' width="600px"
  38.       <thead> 
  39.         <tr><th>id</th><th>name</th></tr> 
  40.       </thead> 
  41.       <tbody id='info'
  42.         <tr align='center' id='111'><td>111</td><td>测试</td></tr> 
  43.       </tbody> 
  44.     </table> 
  45.   </div> 
  46. </body> 
  47. </html>

Tags: php+jQuery php实时刷新

分享到: