집 > 기사 > 백엔드 개발 > jquery php에서 실시간 데이터 업데이트를 구현하는 방법

jquery php에서 실시간 데이터 업데이트를 구현하는 방법

藏色散人원래의: 2022-01-06 09:21:043102검색

jquery php에서 실시간 데이터 업데이트를 구현하는 방법: 1. 데이터 테이블을 생성합니다. 2. 서버 파일 "demo.php"를 생성하여 데이터베이스에 연결하고 관련 작업을 수행합니다. 3. "fresh.html"을 생성합니다. " 데이터를 표시하는 웹 페이지입니다.

이 문서의 운영 환경: Windows 7 시스템, PHP 버전 7.1, Dell G3 컴퓨터.

jquery php는 어떻게 실시간 데이터 업데이트를 구현하나요?

php+jQuery ajax 실시간 새로고침 표시 데이터 기능 구현 예시

자세한 내용은 다음과 같습니다.

데이터 테이블 생성: 데모

--
-- 表的结构 `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, &#39;雷军&#39;),
(2, &#39;马化腾&#39;),
(3, &#39;李彦宏&#39;),
(4, &#39;马云&#39;);

Server 파일: 데모.php

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

데이터 표시 웹페이지: fresh.html

<html>
<head>
  <meta charset=&#39;utf-8&#39;>
  <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=&#39;center&#39; id=&#39;"+data.info[i].id+"&#39;><td>"+data.info[i].id+"</td><td>"+data.info[i].name+"</td></tr>";
              var tag = &#39;#&#39;+data.info[i].id;
              if(!$(tag).length){
                $("#info").append(dom);
              }
            }
        }else{
          alert(&#39;error&#39;);
        }
      },
      error:function(res){
        alert(res.status);
      }
    });
  }
  window.setInterval(check, 1000); //每秒执行一次
</script>
<body>
  <div style=&#39;width:600px;margin:0 auto;&#39;>
    <table border=&#39;1&#39; width="600px">
      <thead>
        <tr><th>id</th><th>name</th></tr>
      </thead>
      <tbody id=&#39;info&#39;>
        <tr align=&#39;center&#39; id=&#39;111&#39;><td>111</td><td>测试</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

추천 학습: "PHP 비디오 튜토리얼"

위 내용은 jquery php에서 실시간 데이터 업데이트를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：웹 페이지에서 index.php를 숨기는 방법다음 기사：웹 페이지에서 index.php를 숨기는 방법