利用ajax轮询实现动态更新mysql的数据流到网页上显示

最新推荐文章于 2020-03-19 20:05:11 发布

改编不是乱编

最新推荐文章于 2020-03-19 20:05:11 发布

阅读量1.2k

点赞数

分类专栏： php 文章标签： php

本文链接：https://blog.csdn.net/qq_36309884/article/details/88411345

版权

php 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果如图：
在这里插入图片描述

后端代码：

<?php 


require_once("dbtools.inc.php");//连接数据库的函数



$link = create_connection();
          

         $sql="SELECT time,envir_tem,envir_hum,soil_PH,soil_tem,soil_hum,illum FROM farm ORDER by id DESC limit 1";
        $result = execute_sql($link, "iot", $sql);
      

$data1="";
$array= array();
class User{
 # public $id;
  public $time;
  public $envir_tem;
  public $envir_hum;
  public $soil_PH;
  public $soil_tem;
  public $soil_hum;
  public $illum;
  
  
 
}
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
 // $user=new User();
 # $user->id = $row['id'];
 // $user->time = $row['time'];
 // $user->envir_tem = $row['envir_tem'];
  //$user->envir_hum = (float)$row['envir_hum'];
 // $user->soil_PH = $row['soil_PH'];
 // $user->soil_tem = $row['soil_tem'];
 //00 $user->soil_hum =(float) $row['soil_hum'];
 // $user->illum = $row['illum'];
  
$time1 = $row['time'];
$tem2= $row['envir_tem'];
 // $array[]=$user;
}




    if(empty($_POST['time']))exit();       
    set_time_limit(0);//无限请求超时时间       
    $i=0;       
    while (true){       
        //sleep(1);       
        usleep(500000);//0.5秒       
        $i++;       
 
        //若得到数据则马上返回数据给客服端，并结束本次请求       
        $rand=rand(1,999);       
        if($rand<=999){   
             $arr=array('success'=>"1",'name'=>'xiaoyu','time'=>$time1,'tem'=>$tem2);  


            echo json_encode($arr);       
            exit();       
        }       
 
        //服务器($_POST['time']*0.5)秒后告诉客服端无数据       
        if($i==$_POST['time']){  
            $arr=array('success'=>"0",'name'=>'xiaoyu','time'=>$time1,'tem'=>$tem2);  
            
            

           // $data1=json_encode($array);
             // echo "{".'"user"'.":".$data."}";
             //echo $data1;







            echo json_encode($arr);       
            exit();       
        }       
    }    
?>

前端代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
    <script  type="text/javascript" src="http://s1.hqbcdn.com/??lib/jquery/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="echarts.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head> 
<body> 




    
        <div id="chartmain" style="width:600px; height: 400px;"></div>       
<p id="msg"></p> 
<input id="btn" type="button" value="测试" /> 
<script  type="text/javascript" > 


var myChart = echarts.init(document.getElementById('chartmain'));
        var base = + new Date(2017,3,8);
        var oneDay = 24*3600*1000;
        var date = [];
        var data = [Math.random()*150];
        var now = new Date(base);
        var day = 30;
        var arr1=[],arr2=[];
var time;
var tem;





    $(function(){ 
        $("#btn").bind("click",{btn:$("#btn")},function(evdata){ 
            $.ajax({ 
                type:"POST", 
                dataType:"json", 
                url:"jiankong.php", 
                timeout:80000,     //ajax请求超时时间80秒 
                data:{time:"1"}, //40秒后无论结果服务器都返回数据 
                success:function(data,textStatus){ 
                    //从服务器得到数据，显示数据并继续查询 
                    if(data.success=="1"){ 
                        $("#msg").append("<br>[有数据]"+data.time); 

                        $("#msg").append("<br>[有数据]"+data.tem); 



time=data.time;
tem=data.tem;






                        evdata.data.btn.click(); 
                    } 
                    //未从服务器得到数据，继续查询 
                    if(data.success=="0"){ 
                        $("#msg").append("<br>[无数据]"); 
                        evdata.data.btn.click(); 
                    } 
                }, 
                //Ajax请求超时，继续查询 
                error:function(XMLHttpRequest,textStatus,errorThrown){ 
                    if(textStatus=="timeout"){ 
                        $("#msg").append("<br>[超时]"); 
                        evdata.data.btn.click(); 
                    } 
                } 
 
            }); 
        }); 
 
    }); 




    var myChart = echarts.init(document.getElementById('chartmain'));
        var base = + new Date(2017,3,8);
        var oneDay = 24*3600*1000;
        var date = [];
        var data = [Math.random()*150];
        var now = new Date(base);
        var day = 30;
        var arr1=[],arr2=[];



    function addData(shift){
            //now = [now.getFullYear(),now.getMonth()+1,now.getDate()].join('/');        
            date.push(time);        
            data.push(tem);
            if (shift) {
                console.log(data);
                //date.shift();
               // data.shift();
            }
           
        }
    
        for (var i = 0; i < day; i++) {
            addData();
        }
        //设置图标配置项
        myChart.setOption({
            title:{
                text:'ECharts 30天内数据实时更新'
            },
            xAxis:{
                type:"category",
                boundaryGap:false,
                data:date
            },
            yAxis:{
                boundaryGap:[0,'100%'],
                type:'value'
            },
            series:[{
                name:'成交',
                type:'line',
                smooth:true, //数据光滑过度
                symbol:'none', //下一个数据点
                stack:'a',
                areaStyle:{
                    normal:{
                        color:'red'
                    }
                },
                data:data
            }]
        })
        setInterval(function(){
            addData(true);
            myChart.setOption({
                xAxis:{
                    data:date
                },
                series:[{
                    name:'成交',
                    data:data
                }]
            });
        },200)
   









</script> 
</body> 
</html>

不嫌麻烦将就看看吧，有很多小问题没时间去改了

改编不是乱编

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用ajax轮询实现动态更新mysql的数据流到网页上显示

效果如图：后端代码：&amp;lt;?php require_once(&quot;dbtools.inc.php&quot;);//连接数据库的函数$link = create_connection(); $sql=&quot;SELECT time,envir_tem,envir_hum,soil_PH,soil_tem,soil_hum,illum FROM farm...
复制链接

扫一扫