1. 程式人生 > >ajax(4)異步查詢數據

ajax(4)異步查詢數據

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)異步查詢數據