本文介绍如何利用Tangram AJAX库实现在HTML页面中通过按钮触发AJAX请求，并将返回的数据动态更新到指定元素的过程。通过示例展示了一个简单的网页交互流程，包括请求URL的选择、数据接收与显示。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> exampleForAjax </title>
<script type="text/javascript" src="http://img.baidu.com/js/tangram-base-1.3.9.js"></script>
</head>
<body>
<div id="msg" style="border:1px solid #9CC;background:#FFF;padding:10px"></div>
<input type="button" value="发送ajax请求" onclick="send()"/>
<script type="text/javascript">
function send(){
T.ajax.get('http://www.sxxncw.cn/test.asp', function(xhr,msg){
T.g("msg").innerHTML += "<p>状态:"+xhr.status+"<br />返回消息:"+msg+'</p>';
})
}
</script>
</body>
</html>
--test.asp---
<%response.write "okok!"%>
--test.php---
<?
echo "test.php ok!";
?>
--test2.asp---
<%response.write "test2.asp"%>
<br>
<table border="1" width="100%">
<tr>
<td align="center" height="30" width="20%">1</td>
<td align="center" width="20%">2</td>
<td align="center" width="20%">3</td>
<td align="center" width="20%">4</td>
<td align="center" width="20%">5</td>
</tr>
<tr>
<td>a1</td>
<td>a2</td>
<td>a3</td>
<td>a4</td>
<td>a5</td>
</tr>
<tr>
<td>b1</td>
<td>b2</td>
<td>b3</td>
<td>b4</td>
<td>b5</td>
</tr>
<tr>
<td>c1</td>
<td>c2</td>
<td>c3</td>
<td>c4</td>
<td>c5</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
<td>d5</td>
</tr>
</table>
<%
dim i
i=0
for i=0 to 10 Step 1
Response.Write(i&"<br>")
next
%>
开源项目： http://tangram.baidu.com/index.html
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
