? ? 在很多時候在服務器端的后臺管理頁面上需要顯示數據庫中某張表中的全部字段數據，這時候就需要根據數據庫中的數據動態建立表格來顯示。

這當然要用javascript實現，并用Ajax實現與服務器后臺的Servlet通信。

? ? 話不多說上源碼：

1 window.onload = function(){ 2 document.getElementById("show").onclick = function(){ 3 // 第一步：創建Ajax引擎 4 var xmlHttp = ajaxFunction(); 5 // 第二步：處理服務器響應數據 6 xmlHttp.onreadystatechange = function(){ 7 if (xmlHttp.readyState == 4) { 8 if (xmlHttp.status == 200 || xmlHttp.status == 304) { 9 // 接收響應結果 10 var data = xmlHttp.responseText; 11 if (data != "" && data != null && data != 0) { 12 document.getElementById("showla").innerHTML = ""; 13 document.getElementById("showTa").innerHTML = "<tr><td style=\"width:40px;text-align:center;\">ID</td>" + 14 "<td style=\"text-align:center;\">搭訕語</td><td style=\"text-align:center;\">地點</td></tr>" 15 for (var i = 0, j = -1, k = 0.1; i < data.length; i++, j--, k++) { 16 var id = eval(data)[i]["_id"]; 17 var wordsString = eval(data)[i]["_content"]; 18 var place = eval(data)[i]["_place"]; 19 var tableStr = "<tr><td id=\"" + i + "\"style=\"text-align:center;\"></td><td id=\"" + 20 j + 21 "\"style=\"text-align:center;\"></td><td id=\"" + 22 k + 23 "\"style=\"text-align:center;\"></td></tr>" 24 document.getElementById("showTa").innerHTML = document.getElementById("showTa").innerHTML + tableStr; 25 document.getElementById(i).innerHTML = id; 26 document.getElementById(j).innerHTML = wordsString; 27 document.getElementById(k).innerHTML = place; 28 } 29 } 30 else 31 if (data == 0) { 32 document.getElementById("showla").innerHTML = "<font color='red'>數據庫錯誤！</font>"; 33 } 34 } 35 } 36 } 37 // 第三步：打開一個連接 38 xmlHttp.open("POST", "../servlet/ShowWordsServlet", true); 39 // 如果是POST請求,需要重新設置編碼格式 40 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 41 xmlHttp.send("show=" + "show"); 42 }

?

其中，接收到的servlet返回的數據格式是json格式，表格的行，列的id是通過i,j,k三個變量動態設置的。

用eval()函數來解析Servlet返回的json數據。json數據中包括的是每個在數據庫中查找到的對象，_id是id字段，_content是語句字段，_place是地址字段。

利用for循環讀取并組裝字符串利用innerHTML顯示在jsp頁面上。

注意：innerHTML會覆蓋之前的內容，所以要用諸如a.innerHTML = a.innerHTML + **;的方式進行追加。

?

? ??

轉載于:https://www.cnblogs.com/ljwbook/p/3624541.html

總結

以上是生活随笔為你收集整理的在jsp页面利用Ajax动态显示数据库中数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。