ThinkPHP定时ajax获取后台数据，使用javascript动态修改前端页面的表格来显示数据

最新推荐文章于 2023-04-12 20:02:39 发布

jsjlhjleon

最新推荐文章于 2023-04-12 20:02:39 发布

阅读量4k

点赞数

分类专栏： php thinkphp 数据库 ajax 文章标签： ajax javascript function stylesheet class 浏览器

php 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

数据库

2 篇文章 0 订阅

订阅专栏

thinkphp

1 篇文章 0 订阅

订阅专栏

废话少说，直接上代码：

<!DOCTYPE html> 


<html> 
	<head> 
	<title>ThinkPHP定时ajax获取后台数据</title> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1"> 

	<link rel="stylesheet" type='text/css' href="../Public/Js/jquery.mobile-1.1.0.min.css" />
    <style type="text/css">
	.ui-font-gray{color:#999; font-size:12px;}	
p {
font-size: 1.5em;
font-weight: bold;
}

.seo {width: 100%; text-align: center; background-color: #B2B2B2; border:0; }
.seo_head,.tracert_head {text-align: center; background-color: #D4E6F7; }
.seo_item {	text-align: center;	background-color: #FFFFFF; }
</style>


	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="../Public/Js/jquery.mobile-1.1.0.min.js"></script>
	
	<script type="text/javascript">
//删除所有行   
         function delAllTableRow(){   
             var mytable = document.getElementById("sssjtable");   
             var rowlen=mytable.rows.length;   
             for(var i=rowlen-1;i>=1;i--){   
                 mytable.deleteRow(i);   
             }   
         }   

		  
         //添加行   
         function addMyRow(dzname, yali, kaimenbaojing, shidianzhuangtai){  
         //var i=0;  		 
             var mytable = document.getElementById("sssjtable");   
             var mytr = mytable.insertRow(-1);   
             //mytr.setAttribute("id","tr"+i);   
			 mytr.setAttribute("class","seo_item");  
			 mytr.setAttribute("align","center");  
             var mytd_1=mytr.insertCell(-1);   
             var mytd_2=mytr.insertCell(-1);   
             var mytd_3=mytr.insertCell(-1);   
             var mytd_4=mytr.insertCell(-1);     
             mytd_1.innerHTML= dzname;   
             mytd_2.innerHTML=yali;   
			 if(kaimenbaojing==1){ 
				mytd_3.innerHTML="<img src='../Public/Image/youbaojing.png' />";   
			 }
			 else if(kaimenbaojing==-1){ 
				mytd_3.innerHTML="";   

			 }
			 else{ 
				mytd_3.innerHTML="<img src='../Public/Image/meibaojing.png' />";   
			 }
			 
			 if(shidianzhuangtai==1){ 
				mytd_4.innerHTML="<img src='../Public/Image/zhengchang.png' />";   
			 }
			 else if(shidianzhuangtai==-1){ 
				mytd_4.innerHTML="";   
			 }
			 else{ 
				mytd_4.innerHTML="<img src='../Public/Image/meibaojing.png' />";
			 }
               
             //i++;   
         }   


function getdzsj() {
    //document.all['news'].style.display = "none";
	//alert('f');
    //setTimeout("show()",500);
	$.ajax({
type: "POST",
url: "__APP__/Shishi/Getdzsj",
data: "",
success: function(msg){

//$.mobile.hidePageLoadingMsg();  //是隐藏
//alert(msg);
var msg = eval('(' + msg + ')'); 
//alert(msg.info);
//var msg = eval( msg ); 
//if(msg.data ==1){
if(msg.status ==1){
//alert(msg.data[0].dzname);

delAllTableRow();
var len = msg.data.length;
for(var i=0;i<len;i++){
	addMyRow(msg.data[i].dzname, msg.data[i].yali, msg.data[i].kaimenbaojing, msg.data[i].shidianzhuangtai);
}
//var myObject = eval('(' + msg + ')'); 
//alert('a');
//alert(msg.info);
//alert(msg.data.name);
//alert(msg.data[0].dzname);
//$.mobile.changePage("content/first.html","slidedown", true, true);
//$.mobile.changePage("__URL__/home.html","slidedown", true, true);
//$.mobile.changePage("index.php/Index/home","slidedown", true, true);
}else{
//alert(msg);
//alert('f');
alert(msg.info);
//$.mobile.changePage("content/loginfalse.html","slidedown", true, true);
}

}
}); 
	
}

  /*
$(function() {
    $("#duanzhanpage").bind( "pagecreate", function( event){
      alert("page  create ");
    });
  });
  
 

 $(function() {
    $("#duanzhanpage").bind( "pageinit", function( event){
      alert( 'jQuery Mobile!' );
    });
  });
  
   */

//alert('f');

window.setInterval(getdzsj,5000);
//window.setTimeout(delAllTableRow,5000);
</script>

</head> 
</html>



<body > 
<div id="duanzhanpage" data-role="page">

<div data-role="header" data-theme="b" data-type="horizontal">

<div data-role="controlgroup" >

<div data-role="navbar">

<ul>

<li><a href="__APP__/Shishi/index" class="ui-btn-active">导航1</a></li>

<li><a href="__APP__/Shishi/digonghao">导航2</a></li>

</ul>

</div>

</div>

</div>
<!-- /头部 -->
	
<div data-role="content" >

<table class="seo" cellpadding="5" cellspacing="1" id="sssjtable">


<tr class="seo_head" align="center">
<th width="30%">行1</th> 
<th width="18%">行2</th>
<th width="26%">行3</th>
<th width="26%">行4</th>
</tr>
<volist name="dzlist" id="dz">
<tr class="seo_item" align="center">
<td>{$dz.dzname}</td> 
<td>{$dz.yali}</td>
<td>
<if condition="($dz.kaimenbaojing eq 1)"> 
<img src="../Public/Image/youbaojing.png" />
<elseif condition="$dz.kaimenbaojing eq -1"/>
<else /> 
<img src="../Public/Image/meibaojing.png" />
</if>
</td>
<td>
<if condition="($dz.shidianzhuangtai eq 1)"> 
<img src="../Public/Image/zhengchang.png" />
<elseif condition="$dz.shidianzhuangtai eq -1"/>
<else /> 
<img src="../Public/Image/meibaojing.png" />
</if>
</td>
</tr> 
</volist>

</table>


</div>

<div data-role="footer">
		<h4>©xxxx有限公司</h4>
	</div><!-- /底部 -->
	
</div><!-- /页面 -->




</body>

</html>

运行环境是php5，数据库是mssql2000，ThinkPHP3.0，还有这里使用的是html5，运行在手机浏览器上。

在浏览器加载完网页后，js会出发这行代码：

window.setInterval(getdzsj,5000);

5秒之后ajax往后台post数据，后台返回json数据，前台解释，使用js来删除表格的所有行数据，再动态添加表格的数据，显示。

转载自： http://www.fenhon.com

jsjlhjleon

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ThinkPHP定时ajax获取后台数据，使用javascript动态修改前端页面的表格来显示数据

废话少说，直接上代码： ThinkPHP定时ajax获取后台数据 .ui-font-gray{color:#999; font-size:12px;} p {font-size: 1.5em;font-weight: bold;}.seo {width: 100%; text-align: center; backgrou
复制链接

扫一扫