ajax(4)異步查詢數據
阿新 • • 發佈:2017-08-15
success pri ans 結果 pos 拷貝 ava -- 提交 註:來源:http://blog.csdn.net/u012882327/article/details/48318677#t2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>index.jsp</title>
<script type="text/javascript" src="jq/jquery-1.8.0.js"></script>
</head>
<body>
<!-- 一個查詢按鈕觸發ajax -->
<input type="button" value="查詢" onclick="query()" />
<br />
<table>
<thead>
<tr>
<td>菜名</td>
<td>價格</td>
</tr>
</thead>
<!-- 用一個id就可以用Jquery操作表體 -->
<tbody id="t_body"></tbody>
</table>
</body>
<script type="text/javascript">
/* 點擊按鈕觸發 */
function query() {
//執行ajax
ajaxFun();
}
/* ajax代碼部分,從jquery幫助文檔可直接拷貝 */
function ajaxFun() {
//ajax執行體
$.ajax({
//提交方式
type : "POST",
//訪問servleturl
url : "query",
//服務器成功返回結果後,會把結果保存到data中
success : function(data) {
//先把表體部分清空
$("#t_body").empty();
//eval獲取返回的JSON對象集合
var d = eval(‘(‘ + data + ‘)‘);
//把數據顯示到頁面的方法
showData(d);
}
});
}
/* 顯示數據 */
function showData(d) {
//循環遍歷一邊d
for ( var i = 0; i < d.length; i++) {
var html = "<tr><td>" + d[i].name + "</td><td>" + d[i].price
+ "</td></tr>";
//通過表體id把顯示文本顯示到網頁中
$("#t_body").append(html);
}
}
</script>
</html>
ajax(4)異步查詢數據