? ? 在很多時(shí)候在服務(wù)器端的后臺(tái)管理頁面上需要顯示數(shù)據(jù)庫中某張表中的全部字段數(shù)據(jù)，這時(shí)候就需要根據(jù)數(shù)據(jù)庫中的數(shù)據(jù)動(dòng)態(tài)建立表格來顯示。

這當(dāng)然要用javascript實(shí)現(xiàn)，并用Ajax實(shí)現(xiàn)與服務(wù)器后臺(tái)的Servlet通信。

? ? 話不多說上源碼：

1 window.onload = function(){ 2 document.getElementById("show").onclick = function(){ 3 // 第一步：創(chuàng)建Ajax引擎 4 var xmlHttp = ajaxFunction(); 5 // 第二步：處理服務(wù)器響應(yīng)數(shù)據(jù) 6 xmlHttp.onreadystatechange = function(){ 7 if (xmlHttp.readyState == 4) { 8 if (xmlHttp.status == 200 || xmlHttp.status == 304) { 9 // 接收響應(yīng)結(jié)果 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;\">地點(diǎn)</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'>數(shù)據(jù)庫錯(cuò)誤！</font>"; 33 } 34 } 35 } 36 } 37 // 第三步：打開一個(gè)連接 38 xmlHttp.open("POST", "../servlet/ShowWordsServlet", true); 39 // 如果是POST請求,需要重新設(shè)置編碼格式 40 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 41 xmlHttp.send("show=" + "show"); 42 }

?

其中，接收到的servlet返回的數(shù)據(jù)格式是json格式，表格的行，列的id是通過i,j,k三個(gè)變量動(dòng)態(tài)設(shè)置的。

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

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

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

?

? ??

轉(zhuǎn)載于:https://www.cnblogs.com/ljwbook/p/3624541.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。