利用原生Ajax技术实现WEB项目信息交互

抬头丨丨微笑^_^

已于 2022-02-17 18:04:35 修改

阅读量574

点赞数

文章标签： ajax 前端交互

于 2022-02-17 18:03:10 首次发布

本文链接：https://blog.csdn.net/DSL95/article/details/122988830

版权

本文展示了如何使用Gson库在Java Servlet中处理查询数据库的结果，并通过Ajax将数据传输到前端JSP页面进行显示。Servlet通过DAO层从Oracle数据库获取学生信息，然后用Gson转换为JSON格式响应给前端。前端JavaScript使用Ajax异步请求数据，并解析JSON更新表格内容。

摘要由CSDN通过智能技术生成

准备JAR

gson-2.8.5.jar
ojdbc6.jar

项目结构

在这里插入图片描述

代码展示

利用JSON进行数据传输，将后台查询数据库的结果展示到前端页面。
index.jsp代码展示：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>查询学生</title>
    <script type="text/javascript">
        function queryInfo() {
            //创建Ajax对象
            var xmlHttp = new XMLHttpRequest();
            //初始化数据
            xmlHttp.open("get", "queryStu", true);
            //发送数据
            xmlHttp.send();
            //创建监听
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    //获取服务器端响应数据
                    var result = xmlHttp.responseText;
                    eval("var info=" + result);
                    //更新到页面中
                    var tb = document.getElementById("tb");
                    for (var i = 0; i < info.length; i++) {
                        tb.innerHTML += "<tr>" +
                            "<td>"+info[i].stuNo+"</td>" +
                            "<td>"+info[i].stuName+"</td>" +
                            "<td>"+info[i].stuSex+"</td>" +
                            "<td>"+info[i].stuAge+"</td>" +
                            "</tr>";
                    }

                }
            }
        }

    </script>
</head>
<body>
<input type="button" value="查询全部" onclick="queryInfo()">
<br><br>
<hr>
<table border="1px" cellspacing="0px" cellpadding="10px">
    <thead>
    <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    </thead>
    <tbody id="tb">
    </tbody>

</table>
</body>
</html>

Servlet代码展示：

package indi.dsl.servlet;

import com.google.gson.Gson;
import indi.dsl.entry.Student;
import indi.dsl.service.Query;
import indi.dsl.service.QueryImpl;

import javax.jws.WebService;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet("/queryStu")
public class MyServlet extends HttpServlet {
    Query service = new QueryImpl();

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求编码格式
        req.setCharacterEncoding("UTF-8");
        //设置响应编码格式
        resp.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html,charset=utf-8");
        //处理请求
        try {
            List<Student> list = service.query();
            for (Student stu : list) {
                System.out.println(stu.getStuNo() + "," + stu.getStuName());
            }
            resp.getWriter().write(new Gson().toJson(list));
        } catch (Exception e) {
            e.printStackTrace();
        }

    }
}

Service代码展示：

package indi.dsl.service;

import indi.dsl.dao.QueryStudent;
import indi.dsl.dao.QueryStudentImpl;
import indi.dsl.entry.Student;

import java.util.List;

public class QueryImpl implements Query{
    QueryStudent queryStudent = new QueryStudentImpl();
    @Override
    public List<Student> query() throws Exception {
        return queryStudent.queryStudent();
    }
}

DAO层代码展示：

package indi.dsl.dao;

import indi.dsl.entry.Student;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

public class QueryStudentImpl implements QueryStudent {

    @Override
    public List<Student> queryStudent() throws Exception {
        List<Student> list = new ArrayList<>();
        //加载驱动
        Class.forName("oracle.jdbc.driver.OracleDriver");
        //获取链接
        Connection con = DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:orcl", "scott", "root");
        //创建sql
        String sql = "select * from student";
        //获取sql执行对象
        PreparedStatement pre = con.prepareStatement(sql);
        //执行sql获取结果集
        ResultSet resultSet = pre.executeQuery();
        while (resultSet.next()) {
            Student stu = new Student();
            stu.setStuNo(resultSet.getInt("stuNo"));
            stu.setStuName(resultSet.getString("stuName"));
            stu.setStuSex(resultSet.getString("stuSex"));
            stu.setStuAge(resultSet.getInt("stuAge"));
            list.add(stu);
        }


        return list;
    }
}

web.xml文件展示：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>queryStu</servlet-name>
        <servlet-class>indi.dsl.servlet.MyServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>queryStu</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

结果展示：

抬头丨丨微笑^_^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用原生Ajax技术实现WEB项目信息交互

准备JARgson-2.8.5.jarojdbc6.jar项目结构代码展示利用JSON进行数据传输，将后台查询数据库的结果展示到前端页面。index.jsp代码展示：<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>查询学生</title> <script type="text/j
复制链接

扫一扫