jQuery实现静态html+ajax请求访问MySQL数据库并显示

#jQuery实现静态html+ajax请求访问MySQL数据库并显示| 来源: 网络整理| 查看: 265

文章目录静态html+ajax与jspajax访问流程图前期准备配置jQuery准备index.html准备dao准备servlet jQuery实现ajax附：关于Maven项目引入js无法使用的问题

静态html+ajax与jsp

为什么要使用ajax请求，而不用jsp的el表达式和jstl方便的得到数据呢？

优点一: 前后端分离 jsp是一种早期的技术，它将前后端杂糅在一起，html和java代码交错；而现在前后端分离逐渐成为业界标准，将静态html和后端java代码分开的思想有利于前后端专注于自己的工作，提高工作效率，降低维护成本。优点二: 访问速度更快我们知道jsp的本质是servlet，因此浏览器在第一次访问jsp时，需要将jsp编译成servlet，这将耗费很多时间，而静态html就没有这样的问题。优点三: 服务器压力更小既然jsp是servlet，那么无论是编译还是访问，都需要占用服务器资源，前后端分离可以有效缓解问题。 ajax访问流程图发起ajax请求发起dao请求发起访问请求得到数据集返回数据列表返回数据串, 可以使用json 静态html servlet dao MySQL数据库前期准备配置jQuery

在web/webapp（具体目录名根据项目类型判断）目录下新建一个js目录，导入jQuery-x.x.x.js文件，脚本下载地址：jQuery下载

准备index.html

编写一个index.html文件，导入jQuery脚本，提供一个按钮和空表格（只有表头），为按钮和表格指定id以便脚本调用：

Hello Maven View Mysql By Ajax + MyBatis ID Name Age

网页效果：在这里插入图片描述

准备dao

笔者在dao层用MyBatis + MyBatis Generator实现了一个读取数据库这种users数据表的方法，这个方法会访问users数据表，并返回一个存有数据的List列表（此处不是本文重点，如果不会用MyBatis，也可以使用JDBC实现）：

package dao; import mapper.UsersMapper; import org.apache.ibatis.session.SqlSession; import pojo.Users; import pojo.UsersExample; import java.util.List; public class UsersUtil { public static List getAllUsers() { InputStream stream = Resources.getResourceAsStream("mybatis-config.xml"); SqlSessionFactory factory = new SqlSessionFactoryBuilder().build(stream); SqlSession session = factory.openSession(); UsersExample example = new UsersExample(); example.createCriteria().andIdIsNotNull(); UsersMapper mapper = myBatisSession.getMapper(UsersMapper.class); return mapper.selectByExample(example); } } 准备servlet

接着在service层实现一个servlet。

此处使用alibaba的fastjson.jar（没有jar包的请自行下载，笔者此处使用Maven配置）实现列表与json的快速转换，最后通过resp.getWriter().append()把json字符串传出：

package service; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArray; import dao.UsersUtil; import pojo.Users; import org.apache.ibatis.io.Resources; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.List; public class UsersServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { List usersList = UsersUtil.getAllUsers(); //JSON转字符串写入resp resp.getWriter().append(JSON.toJSONString(jsonArray)); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doGet(req, resp); } } jQuery实现ajax

在js目录中创建loadDataAjax.js脚本，该脚本会在网页加载完成后为view按钮分配click方法，点击后会发送ajax请求，得到数据并加入表格。

$(function(){ pass }): 网页加载完成时会自动调用函数体$("#id").click(function(){ pass }): 监听对应id的按钮，提供click方法$.ajax(): ajax请求

关于ajax请求的参数：

url: 请求地址type: 指定请求类型(get/post)dataType: 指定返回的数据类型.done: 访问成功调用的方法，其中参数msg是resp返回的数据.fail: 访问失败调用的方法 //网页加载完成时调用 $(function () { //为id=view的按钮提供click方法 $("#view").click(function () { //发送ajax请求 $.ajax({ url: encodeURI("sql"), type: "get", dataType: "json" }) //访问成功 .done(function (msg) { //清空id=data的表格第一行（表头）以外的数据 $("#data tr:not(:first)").empty(); //遍历返回的json数组 $.each(msg, function (index, user) { //向表格中添加json数组每个元素的内容 $("#data").append("" + "" + user.id + "" + "" + user.name + "" + "" + user.age + "" + "") }) }) //访问失败 .fail(function () { alert("ERROR!") }) }) })

最后在index.html中导入脚本：

网页成功返回数据并写入列表：在这里插入图片描述

附：关于Maven项目引入js无法使用的问题

Maven中的css、js文件都会被过滤器过滤，要使文件可以正常使用，我们需要在WEB-INF/web.xml中加入以下配置：

default *.js default *.css

【本文地址】

公司简介

联系我们