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

2023-08-02 02:51:00

准备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 += "" +""+info[i].stuNo+"" +""+info[i].stuName+"" +""+info[i].stuSex+"" +""+info[i].stuAge+"" +"";}}}}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();@Overrideprotected 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();@Overridepublic 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 {@Overridepublic 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");//创建sqlString 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文件展示：

<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>queryStuservlet-name><servlet-class>indi.dsl.servlet.MyServletservlet-class>servlet><servlet-mapping><servlet-name>queryStuservlet-name><url-pattern>/url-pattern>servlet-mapping>
web-app>
  • 结果展示：
    在这里插入图片描述


本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！

相关文章

Duilib中list控件支持ctrl和shif多行选中的实现

[ICML2015]Batch Normalization:Accelerating Deep Network Training by Reducing Internal Covariate Shif

win10系统 微软输入法 于eclipse ctrl+shif+f冲突间接处理办法

Codeforces Round #259 (Div. 2) B. Little Pony and Sort by Shif

读LDD3，内存映射与DMA--PAGE_SHIF…

VMware虚拟机安装XP【要先分区，再设置BOOT 启动CD，shif+上移】

更换iBus五笔的左与右Shif

sublime ctrl+shif+f 没用解决办法

idea 对 ctrl + z 的撤销 是 ctrl + shif + z

计算机最早的设计师应用于,计算机应用基础选择题doc.doc

win10自带截图神器：Win+Shift+S

Python基础之文件目录操作

python简述目录_Python基础之文件目录操作(示例代码)

tp5 如何做数据采集

任务2-7(服务器字体+阿里巴巴矢量库)

html标签（1)：h1~h6,p,br,pre,hr

TI 电量计介绍与芯片选型指南

几款TI电源芯片简介

TI DSP芯片C2000系列读取FLASH数据

德州仪器(Ti)平台嵌入式开发基础

TI三相电机智能栅极驱动芯片特点分类

省选模拟（12.08） T3 圈圈圈圈圈圈圈圈

Hadoop生态圈技术栈（上）

大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之6.Impala交互式查询

小猿圈之Linux下Mysql 操作命令

大数据Hadoop生态圈常用面试题

大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之4.Hive DDL、DQL和数据操作

备战Noip2018模拟赛11（B组）T3 Monogatari 物语

【智能优化算法-圆圈搜索算法】基于圆圈搜索算法Circle Search Algorithm求解单目标优化问题附matlab代码

NYOJ 78 圈水池

递归问题 跑道 汽车 绕圈问题 Python实现

Hadoop生态圈（三）：MapReduce

立即
投稿

微信公众账号

微信扫一扫加关注

 返回
顶部