您的位置：首页 > Web前端 > JavaScript

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

2012-07-27 16:08 1621 查看

废话少说，直接上代码：

<!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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax javascript function stylesheet class 浏览器

相关文章推荐

新的分享

章节导航