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


Posted in PHP onSeptember 12, 2019

本文实例讲述了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;i<count;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程序设计有所帮助。

PHP 相关文章推荐
PHP数据缓存技术
Feb 14 PHP
php下mysql数据库操作类(改自discuz)
Jul 03 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
Apr 05 PHP
Yii使用CLinkPager分页实例详解
Jul 23 PHP
php中define用法实例
Jul 30 PHP
yii2.0实现验证用户名与邮箱功能
Dec 22 PHP
thinkphp框架实现数据添加和显示功能
Jun 29 PHP
PHP判断数组是否为空的常用方法(五种方法)
Feb 08 PHP
ThinkPHP实现图片上传操作的方法详解
May 08 PHP
PHP常用操作类之通信数据封装类的实现
Jul 16 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
Jun 10 PHP
php输出文字乱码的解决方法
Oct 04 PHP
php创建多级目录与级联删除文件的方法示例
Sep 12 #PHP
PHP实现的文件浏览器功能简单示例
Sep 12 #PHP
PHP通过文件保存和更新信息的方法分析
Sep 12 #PHP
关于Curl在Swoole协程中的解决方案详析
Sep 12 #PHP
PHP判断一个变量是否为整数、正整数的方法示例
Sep 11 #PHP
PHP中有关长整数的一些操作教程
Sep 11 #PHP
PHP生成随机字符串实例代码(字母+数字)
Sep 11 #PHP
You might like
PHP笛卡尔积实现算法示例
2018/07/30 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
JS验证不重复验证码
2017/02/10 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
pytorch 常用线性函数详解
2020/01/15 Python
基于python图像处理API的使用示例
2020/04/03 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
keras.layer.input()用法说明
2020/06/16 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
Servlet如何得到服务器的信息
2015/12/22 面试题
教育专业个人求职信
2013/12/02 职场文书
汽车维修专业个人求职信范文
2014/01/01 职场文书
道德演讲稿
2014/05/21 职场文书
单位委托函范文
2015/01/29 职场文书
酒店辞职书范文
2015/02/26 职场文书
出国导师推荐信
2015/03/25 职场文书
七年级作文之我的梦想
2019/10/16 职场文书
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js