利用Ajax实现网页局部数据的实时更新

Eddy 发布于2012-10-18 14:22:17 分类: 网站相关 已浏览loading 网友评论0条 我要评论

最近在看JS和Jquery,练练手做了这么个东东~

服务端代码(getdata.php),其中有php利用ODBC连接sql2008数据库:



<?php

$connection = odbc_connect("Driver={SQL Server Native Client 10.0};Server=WINDOWS-01\SQLEXPRESS;Database=backups;", "php", "123456");
if (!$connection){
	exit("Connection Failed: " . $connection);
}

$sql="SELECT pro_name,ask_price,bid_price FROM t_item";
$rs=odbc_exec($connection,$sql);
if (!$rs){
	exit("Error in SQL");
}

echo "<h3>商品报价数据实时更新</h3><table><tr>";
echo "<th>类别</th>";
echo "<th>卖价</th><th>买价</th></tr>";

while (odbc_fetch_row($rs)){
	$pro_name=odbc_result($rs,"pro_name");
	$ask_price=odbc_result($rs,"ask_price");
	$bid_price=odbc_result($rs,"bid_price");
	echo "<tr><td>$pro_name</td><td>$ask_price</td>";
	echo "<td>$bid_price</td></tr>";
}
echo "</table>";
odbc_close($connection);

?>

前端代码(index.html):



<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Ajax Web</title>
	<script src="jquery/jquery-1.8.0.js" type="text/javascript" ></script>
	<script>
		function getD(){
		$.post("http://127.0.0.1/getdata.php",
				{
				},
				function(data){
					//返回数据处理
					$("#loading").html(data);
				});
		setTimeout('getD()',3000);
		}
		$(function(){
			getD();
		});
	
	</script>
</head>
<body>
	<div id="wrapper">
		<p id="fxdata"><span id="loading">加载中...</span></p>
	</div>
</body>
<html>

PS:数据库中的相关信息是动态更新的。

已经有(0)位网友发表了评论,你也评一评吧!
原创文章如转载,请注明:转载自Eddy Blog
原文地址:http://www.rrgod.com/webdesign/849.html     欢迎订阅Eddy Blog

关于 Ajax  局部  数据  实时更新  的相关文章

记住我的信息,下次不用再输入 欢迎给Eddy Blog留言