• 技术文章 >后端开发 >PHP问题

    jquery php如何实现实时数据更新

    藏色散人藏色散人2022-01-06 09:21:04原创114

    jquery php实现实时数据更新的方法:1、创建数据表;2、通过创建服务器文件“demo.php”连接数据库并进行相关操作;3、创建显示数据的“fresh.html”网页即可。

    本文操作环境:Windows7系统、PHP7.1版、Dell G3电脑。

    jquery php如何实现实时数据更新?

    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视频教程

    以上就是jquery php如何实现实时数据更新的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery php
    上一篇:网页怎么隐藏index.php 下一篇:php怎么实现商品通知

    相关文章推荐

    • 练习MySQL数据的插入、更新与删除• 始终如一的坚守,PHP对数据更新的更优解• 随着更新潮流,把PHP字节小程序担保支付类也更新了!• php怎么实现mysql更新

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网