基于Ajax+JSon的表格数据浏览【简单版--没连接数据库】+【连接数据库版】

已于 2023-05-16 21:32:56 修改
阅读量430 收藏 2
点赞数
分类专栏： Javaweb网站练习 平时学习 Javaweb模块模型 文章标签： ajax json 数据库
于 2023-05-16 18:53:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63064861/article/details/130711877
版权

目录

基于Ajax+JSon的表格数据浏览【简单版--没连接数据库】

代码：

ajax.js

ch10_4.jsp

 student.java

Query.java

运行结果：

点击获取表格后：

基于Ajax+JSon的表格数据浏览【简单版--没连接数据库】

代码：

ajax.js

//声明XMLHttpRequest对象
var httpRequest=null;
//创建XMLHttpRequest对象实例的方法
function createXHR(){
    if(window.XMLHttpRequest){
        httpRequest=new XMLHttpRequest();
    }else if(window.ActiveXObject){
        try{
            httpRequest=new ActiveXObject("Maxml2.XMLHTTP");//IE较新版
        }catch (e){
            try{
                httpRequest=new ActiveXObject("Microsoft.XMLHTTP");//IE较老版
            }catch (e) {
                httpRequest=null;
            }
        }
    }
    if (!httpRequest){
        alert("fail to create httpRequest!");
    }
}
function sendRequest(url,params,method,handler){
    createXHR();
    if (!httpRequest){
        return false;
    }
    httpRequest.onreadystatechange=handler;
    if(method=="GET"){
        httpRequest.open(method,url+'?'+params,true);
        httpRequest.send(null);
    }
    if (method=="POST"){
        httpRequest.open(method,url,true);
        httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        httpRequest.send(params);
    }
}

ch10_4.jsp

<%--
  Created by IntelliJ IDEA.
  User: CaptainDong
  Date: 2023/5/16
  Time: 17:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>表格数据浏览</title>
    <style>
        #body_style {

            background-color: #c7f5db;
        }

        #myDiv {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            font-size: medium;
            border: 2px solid #28e5d8f0;
            padding: 28px 30px;
            background: #a1eec5;
            width: 350px;
            border-radius: 25px;
            -moz-border-radius: 25px;
        }
    </style>
    <script type="text/javascript" src="js\ajax.js"></script>
    <script type="text/javascript">
        function query(){
            sendRequest("query",null,"POST",show);
        }
        function show(){
            if (httpRequest.readyState==4){
                if (httpRequest.status=200){
                    let tBody=document.getElementById("tBody");
                    tBody.innerHTML="";
                    let studentList=JSON.parse(httpRequest.responseText);
                    for (let index in studentList){
                        let newTr=tBody.insertRow();
                        let newTd1=newTr.insertCell();
                        newTd1.innerHTML=studentList[index].studentNumber;
                        let newTd2=newTr.insertCell();
                        newTd2.innerHTML=studentList[index].studentName;
                        let newTd3=newTr.insertCell();
                        newTd3.innerHTML=studentList[index].studentSex;
                    }
                }
            }
        }
    </script>
</head>
<body id="body_style">
<div id="myDiv">
<a href="javascript:query()">获取表格数据</a><br><br>
    <table  border="7" align="center">
        <tr>
            <th>学号</th><th>姓名</th><th>性别</th>
            <tbody id="tBody"></tbody>
        </tr>
    </table>
</div>
</body>
</html>

 student.java

package com.dong;

public class Student {
    private String studentNumber;
    private String studentName;
    private String studentSex;

    public Student() {
    }

    public Student(String studentNumber, String studentName, String studentSex) {
        this.studentNumber = studentNumber;
        this.studentName = studentName;
        this.studentSex = studentSex;
    }

    public String getStudentNumber() {
        return studentNumber;
    }

    public void setStudentNumber(String studentNumber) {
        this.studentNumber = studentNumber;
    }

    public String getStudentName() {
        return studentName;
    }

    public void setStudentName(String studentName) {
        this.studentName = studentName;
    }

    public String getStudentSex() {
        return studentSex;
    }

    public void setStudentSex(String studentSex) {
        this.studentSex = studentSex;
    }
}

Query.java

package com.li;

import com.dong.Student;
import net.sf.json.JSONArray;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/query")
public class Query extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out=response.getWriter();
        Student student1=new Student("202121555","张三","男");
        Student student2=new Student("202121566","小美","女");
        List<Student>studentList1=new ArrayList<Student>();
        studentList1.add(student1);
        studentList1.add(student2);
        JSONArray jsonArray = JSONArray.fromObject(studentList1);
        out.println(jsonArray.toString());
    }
}
  • 这段代码是一个 JSP 页面，用于实现一个简单的 AJAX 表格数据浏览功能。
  • 页面包含一个表格和一个按钮，当用户点击按钮时，JavaScript 中的 query() 函数被调用。query() 函数使用了封装好的 sendRequest() 函数，向服务器发起了一个异步请求，并指定了请求处理函数为 show()。
  • 当服务器返回响应时，show() 函数被调用。如果响应状态码为 200，则解析服务器返回的 JSON 格式数据，并将其填充到表格中。具体来说，show() 函数首先获取到表格的 <tbody> 元素，并清空其中的所有子元素。然后通过 JSON.parse() 方法将服务器返回的 JSON 字符串解析成 JavaScript 对象数组，并遍历该数组。在循环中，使用 insertRow()、insertCell() 和 innerHTML 等方法动态创建表格的行和列，并将数据填充进去。
  • 需要注意的是，这里使用了 XMLHttpRequest 对象进行了 AJAX 请求。而 sendRequest() 函数则是对 XMLHttpRequest 对象的一次封装，用于简化 AJAX 请求的过程。此外，页面中还定义了一些 CSS 样式，用于美化页面的外观。
  • 此外，该 JSP 页面引用了一个名为 ajax.js 的 JavaScript 文件，用于封装 AJAX 请求相关的代码。该文件中包含了一个名为 sendRequest() 的函数，用于方便地向服务器发起 AJAX 请求，其调用形式为：sendRequest(url, data, method, callback)。其中，url 参数表示请求的 URL 地址，data 表示请求数据（可以为空），method 表示请求方法，callback 表示请求处理完毕后的回调函数。具体实现可以查看 ajax.js 文件的代码。

运行结果：

点击获取表格后：

基于Ajax+JSon的表格数据浏览【连接数据库版】

分析： 

我们需要对上述代码进行如下修改：

  1. 首先，在 doGet() 和 doPost() 方法中用 JDBC 连接到数据库。

  2. 然后，查询数据库获取学生信息，将其添加到 List 中。

  3. 最后，将列表转换为 JSON 格式并作为响应返回给客户端。

修改之后的代码为：

代码：

package com.li;

import com.dong.Student;
import net.sf.json.JSONArray;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;

/**
 * 连接数据库获取表格数据
 */
@WebServlet("/queryForm")
public class QueryForm extends HttpServlet {
    private final String JDBC_DRIVER = "com.mysql.cj.jdbc.Driver";
    private final String DB_URL = "jdbc:mysql://localhost:3306/test01";
    private final String USER_NAME = "root";
    private final String PASSWORD = "root";

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        Connection conn = null;
        PreparedStatement stmt = null;
        ResultSet rs = null;

        try {
            /**
             * 连接数据库
             */
            Class.forName(JDBC_DRIVER);
            conn = DriverManager.getConnection(DB_URL, USER_NAME, PASSWORD);

            /**
             * 查询学生信息
             */
            String sql = "select * from student";
            stmt = conn.prepareStatement(sql);
            rs = stmt.executeQuery();

            List<Student> studentList = new ArrayList<>();
            while (rs.next()) {
                String studentNumber = rs.getString("studentNumber");
                String studentName = rs.getString("studentName");
                String studentSex = rs.getString("studentSex");
                Student student = new Student(studentNumber, studentName, studentSex);
                studentList.add(student);
            }

            //将列表转换为 JSON 格式并发送回客户端
            JSONArray jsonArray = JSONArray.fromObject(studentList);
            out.println(jsonArray.toString());
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            try {
                if (rs != null)
                    rs.close();
                if (stmt != null)
                    stmt.close();
                if (conn != null)
                    conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}
//声明XMLHttpRequest对象
var httpRequest=null;
//创建XMLHttpRequest对象实例的方法
function createXHR(){
    if(window.XMLHttpRequest){
        httpRequest=new XMLHttpRequest();
    }else if(window.ActiveXObject){
        try{
            httpRequest=new ActiveXObject("Maxml2.XMLHTTP");//IE较新版
        }catch (e){
            try{
                httpRequest=new ActiveXObject("Microsoft.XMLHTTP");//IE较老版
            }catch (e) {
                httpRequest=null;
            }
        }
    }
    if (!httpRequest){
        alert("fail to create httpRequest!");
    }
}
function sendRequest(url,params,method,handler){
    createXHR();
    if (!httpRequest){
        return false;
    }
    httpRequest.onreadystatechange=handler;
    if(method=="GET"){
        httpRequest.open(method,url+'?'+params,true);
        httpRequest.send(null);
    }
    if (method=="POST"){
        httpRequest.open(method,url,true);
        httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        httpRequest.send(params);
    }
}
<%--
Created by IntelliJ IDEA.
User: CaptainDong
Date: 2023/5/16
Time: 17:51
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>表格数据浏览</title>
    <style>
        #body_style {
            background-color: #c7f5db;
        }

        #myDiv {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            font-size: medium;
            border: 2px solid #28e5d8f0;
            padding: 28px 30px;
            background: #a1eec5;
            width: 350px;
            border-radius: 25px;
            -moz-border-radius: 25px;
        }
    </style>
    <script type="text/javascript" src="js\ajax.js"></script>
    <script type="text/javascript">
        function query01(){
            sendRequest("queryForm",null,"POST",show);
        }
        function show(){
            console.log(httpRequest.responseText); // 打印 HTTP 响应内容
            if (httpRequest.readyState==4){
                if (httpRequest.status==200){
                    let responseText = httpRequest.responseText.trim();
                    if (responseText === ''){
                        alert('服务器返回空数据！');
                        return;
                    }
                    let tBody=document.getElementById("tBody");
                    tBody.innerHTML="";
                    let studentList=JSON.parse(responseText);
                    if(studentList.length === 0){
                        alert("未查询到任何数据！");
                        return; // 结束函数
                    }
                    for (let index in studentList){
                        let newTr=tBody.insertRow();
                        let newTd1=newTr.insertCell();
                        newTd1.innerHTML=studentList[index].studentNumber;
                        let newTd2=newTr.insertCell();
                        newTd2.innerHTML=studentList[index].studentName;
                        let newTd3=newTr.insertCell();
                        newTd3.innerHTML=studentList[index].studentSex;
                    }
                } else {
                    alert('请求发生错误：' + httpRequest.status);
                }
            } else {
                console.log('请求正在发送中...');
            }

        }
    </script>
</head>
<body id="body_style">
<div id="myDiv">
    <a href="javascript:query01()">获取表格数据</a><br><br>
    <table  border="7" align="center">
        <tr>
            <th>学号</th><th>姓名</th><th>性别</th>
            <tbody id="tBody"></tbody>
        </tr>
    </table>
</div>
</body>
</html>
package com.dong;

public class Student {
    private String studentNumber;
    private String studentName;
    private String studentSex;

    public Student() {
    }

    public Student(String studentNumber, String studentName, String studentSex) {
        this.studentNumber = studentNumber;
        this.studentName = studentName;
        this.studentSex = studentSex;
    }

    public String getStudentNumber() {
        return studentNumber;
    }

    public void setStudentNumber(String studentNumber) {
        this.studentNumber = studentNumber;
    }

    public String getStudentName() {
        return studentName;
    }

    public void setStudentName(String studentName) {
        this.studentName = studentName;
    }

    public String getStudentSex() {
        return studentSex;
    }

    public void setStudentSex(String studentSex) {
        this.studentSex = studentSex;
    }
}

captain_dong
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
PHP+JQ+AJAX+json 数据库实时动态增删改查
阿空的博客
10-20 7145
PHP+JQ+AJAX+json 数据库动态增删改查数据库 id为主键，自动增长。html部分三个form表单，分别用来增加、查询和修改。 refreash()用来刷新表。一打开页面、插入、修改、删除成功后都会调用。 insert（）、myQuery（）、myChange()、myDelete（）顾名思义。 修改部分是点击表格内的修改按钮，传数据到上方的修改框，作出修改后点击form的修改按
json 预览工具
11-13
预览json 检查json格式是否正确，一键预览格式，自带格式化操作按钮
json文件预览_如何把json数据转成pdf形成表格？
weixin_39629352的博客
12-03 729
PDF是大家常用的工具，有时候需要打印就可以用pdf，有时候，我们需要把JSON格式转换成pdf表格，然后再进行后续的使用。今天给推荐一个在线的 json数据转pdf形成pdf表格看图中网站地址，用自己的谷歌浏览器输入即可：在线JSON转PDF文件_json字符转pdf表格_json转pdf_yzc工具网​www.yzcopen.com工具/原料一台电脑一个浏览器方法/步骤第一步咱们打开网站，选择...
电脑字体在哪个文件夹_实用工具！让你的电脑拥有macOS一样的空格预览功能
weixin_40008339的博客
10-29 145
用过mac电脑的应该都知道，mac有一个非常实用、强大的功能--空格预览。简单的说就是当鼠标选中文件之后，点击空格可以预览文件，再次点击空格可以退出预览，这使得mac电脑非常高效，也非常有特色。从mac迁移到windows之后会想，windows能不能拥有像mac那样的空格预览功能？本文介绍两款工具，让windows系统拥有同macOS一样的空格预览功能。前言学习和工作中会遇到各种类型的文件，wo...
JSON数据格式化展示
wltsysterm的博客
04-17 1613
项目做多了，就发现，总结非常有必要。今天分享的是，json数据格式化展示的两种方法。 方法一 表格形式的数据展示： 效果如下： 实现代码如下：//////jsp代码如下： <table id="mess" class="frm" style="width:584px;height:362px;"></table> <script> content='{ "navnums": { "0":
表格中json数据展示
hjin_的博客
06-14 1197
表格中json数据展示、pre标签使用
ajax+表格+mysql数据库数据库_ajax+php+mysql 读取数据库的简单示例
weixin_35057804的博客
01-26 281
这篇文章介绍的内容是关于ajax+php+mysql 读取数据库的简单示例 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下1.创建数据库create database ajaxdemo default charset utf8;切换到当前数据库use ajaxdemo;创建表并插入数据CREATE TABLE `ajaxtest` (`userid` int(11) NOT NUL...
jquery ajax数据分页显示,基于Jquery+Ajax+Json实现分页显示
weixin_39864682的博客
08-05 432
1.后台action产生json数据。List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate);int totalRows = blackList.size();StringBuffer sb = new StringBuffer();sb.append("{\"totalCou...
jsp+servlet+ajax+oracle数据库-实现简单的登陆、注册、找回密码功能(与Oralce数据库连接)
iprotn的博客
01-09 1149
首先在使用PL/sql在Oracle数据库中创建BOOK_USER表格和Sequences序列——注：如果没有用到nextval可以不用创建序列 JavaEE列表
Struts2+ajax+json返回list.docx
01-25
在Web开发中，Struts2、Ajax和JSON的结合使用能实现异步数据交互，提高用户体验。本实例展示了如何在Struts2框架下，通过Ajax发送请求获取JSON数据，并将数据返回到JSP页面，以填充下拉列表（`<s:select/>`标签）。 ...
asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码
10-26
在ASP.NET中，我们可以创建一个ASP.NET Web Form页面（如`AjaxJson.aspx`），并在后台代码（如`AjaxJson.aspx.cs`）中处理数据获取和计算分页信息。同时，我们需要在页面中包含必要的JavaScript库，如jQuery和用于...
数据挖掘与数据管理-存储数据至数据库.pptx
11-24
1. **MySQL**：这是一个关系型数据库管理系统，它以表格的形式组织数据，每个表由多个字段（列）和记录（行）组成。MySQL支持SQL语言，易于操作和管理。安装MySQL涉及下载安装包，解压缩，配置环境变量，安装服务器...
基于SSM的疫情数据可视化、录入统计系统【源码+数据库】
05-01
1）图表展示：到目前为止，全国疫情分布图、扇形图、柱状图和表格。 2）数据录入：录入各个省份的...前端技术：Echarts，Ajax，Json, JSP 管理工具：Maven 3.6.0 开发工具：IDEA jdk版本：jdk1.8 管理员 admin 123456
基于SpringBoot+Vue搭建的多功能体育场地智能管理系统源码+数据库+项目说明.zip
01-08
* 该项目在1.0的基础上进行的改进，前后端采用json数据格式交互，实现前后端分离 * 并不是完全的前后端分离，只是用了vue做模板引擎，jquery+vue * 该项目使用了Thymeleaf，只是为了跳转更方便 * 该项目分为两个部分...
MVC+AJax+JSon实现简单的单表增删改查
wangshiwen011的博客
07-20 738
一、附html和学生类代码 student.html 其中id为'tt'的表用来显示学生信息 id为'toup'的div用来做更改信息的回显，先设置style使div隐藏 id为'toad'的div是用来添加学生的输入信息框，也设置style使div隐藏 <!DOCTYPE html> <html> <head> <meta charset...
AJAX中get和post的区别
最新发布
weixin_56187723的博客
06-20 991
请注意，虽然这些区别在大多数情况下都适用，但HTTP请求和响应的具体行为可能还受到其他因素的影响，如服务器配置、客户端实现等。是两种常用的HTTP请求方法，它们之间存在一些关键的区别。在AJAX（Asynchronous JavaScript and XML）中，
Ajax入门
Gilpin30的博客
06-16 1324
Day01_Ajax入门
AJAX 数据库
06-18 536
AJAX（Asynchronous JavaScript and XML）是一种流行的网络开发技术，它允许网页在不重新加载整个页面的情况下与服务器交换数据和更新部分网页内容。AJAX技术与数据库的结合，为现代网络应用提供了更加丰富和动态的用户体验。本文将探讨AJAX如何与数据库交互，以及这种交互在实际应用中的优势和挑战。
spring ajax 表格查询,layui的数据表格+springmvc，mysql数据库连接，实现搜索功能的例子
05-05
这里提供一个简单的示例，实现基于 Spring MVC 和 Ajax 的表格查询功能，使用的前端框架是 layui 数据表格，数据库使用的是 MySQL。 1. 在 pom.xml 文件中添加以下依赖： ```xml <!-- Spring MVC --> <groupId>...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

captain_dong

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值