php+jQuery ajax实现的实时刷新显示数据功能示例-巨人网络通讯

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

创建数据表：demo

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

服务器文件：demo.php

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

显示数据网页: fresh.html

html>
head>
  meta charset='utf-8'>
  title>hello/title>
/head>
body>
script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js">/script>
script>
  function check(){
    $.ajax({
      type:"GET",
      url:"./demo.php",
      dataType:"json",
      success:function(data){
        if(data.success){
          var count = data.info.length;
            for(i=0;icount;i++){
              var dom = "tr align='center' id='"+data.info[i].id+"'>td>"+data.info[i].id+"/td>td>"+data.info[i].name+"/td>/tr>";
              var tag = '#'+data.info[i].id;
              if(!$(tag).length){
                $("#info").append(dom);
              }
            }
        }else{
          alert('error');
        }
      },
      error:function(res){
        alert(res.status);
      }
    });
  }
  window.setInterval(check, 1000); //每秒执行一次
/script>
body>
  div style='width:600px;margin:0 auto;'>
    table border='1' width="600px">
      thead>
        tr>th>id/th>th>name/th>/tr>
      /thead>
      tbody id='info'>
        tr align='center' id='111'>td>111/td>td>测试/td>/tr>
      /tbody>
    /table>
  /div>
/body>
/html>

更多关于PHP相关内容可查看本站专题：《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家PHP程序设计有所帮助。

您可能感兴趣的文章:

jQuery+Ajax实现用户名重名实时检测
Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存）
jquery ajax 检测用户注册时用户名是否存在
jquery+ajax实现异步上传文件显示进度条
Jquery ajax书写方法代码实例解析
基于ajax及jQuery实现局部刷新过程解析
JQuery发送ajax请求时中文乱码问题解决
JQuery Ajax如何实现注册检测用户名

全 部 栏 目

全部栏目