在jsp页面利用Ajax动态显示数据库中数据

本文介绍: 在很多时候在服务器端的后台管理页面上需要显示数据库中某张表中的全部字段数据，这时候就需要根据数据库中的数据动态建立表格来显示。

在很多时候在服务器端的后台管理页面上需要显示数据库中某张表中的全部字段数据，这时候就需要根据数据库中的数据动态建立表格来显示。

这当然要用javascript 实现，并用Aja x 实现与服务器后台的Se r v let 通信。

话不多说上源码：

 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 != "" &amp;&amp; data != null &amp;&amp; data != 0) {
12                         document.getElementById("showla").innerHTML = "";
13                         document.getElementById("showTa").innerHTML = "<tr&gt;<td style="width:40px;text-align:center;"&gt;ID</td&gt;" +
14                         "<td style="text-align:center;"&gt;搭讪语</td&gt;<td style="text-align:center;"&gt;地点</td&gt;</tr&gt;"
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     }