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

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

这当然要用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 + **;的方式进行追加。

相关推荐
蛋蛋的就会顺顺的9 小时前
hot100 p0——栈,贪心算法,动态规划
java·前端·javascript·算法·leetcode·力扣
需要82610 小时前
Spring Bean 生命周期:从实例化到销毁的完整钩子
java·后端·spring
小 黄 鸡10 小时前
HashMap 面试必会知识点详解(JDK 8)
java·面试·职场和发展
伯恩bourne12 小时前
Spring Boot Bean 注册的两种方式:@Component 家族 vs @Configuration + @Bean
java·spring boot·后端
silvamux_12 小时前
curl 测试 OpenAI 兼容 API 的完整流程
java·人工智能·缓存·ai·oneapi
省钱兄--zs13 小时前
深圳24小时自助健身房软硬件解决方案实战指南与开发流程详解
java·数据仓库·spring boot·小程序·架构
顽疲13 小时前
Java vue 养老系统源码详解:月账单 care_month_bill 与 Quartz 扣费 Job 实践
java·开发语言·vue.js·vue养老·springboot养老·java养老
Wang's Blog13 小时前
Java 项目实战: 交友项目 - 安装开发工具与环境准备
java·开发语言·交友
用户212968352616813 小时前
开源了一个 Java 多智能体 LLM 框架 Baton:一个依赖,把 Agent 循环、工具调用、记忆、编排全配齐
java·llm
helmsail13 小时前
05 管理活动与选品
java