jQuery实现静态html+ajax请求访问MySQL数据库并显示_mysql 存储的html文章如何通过jq 显示

作者：小惠珠哦 | 2024-07-11 04:12:56

踩

mysql 存储的html文章如何通过jq 显示

文章目录

静态html+ajax与jsp
ajax访问流程图
前期准备
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访问流程图

前期准备

配置jQuery

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

准备index.html

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello Maven</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script type="text/javascript" src="js/jquery-3.5.0.js"></script>
</head>
<body>
<button id="view">View Mysql By Ajax + MyBatis</button>
<table id="data">
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Age</th>
  </tr>
</table>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

准备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<Users> 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);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

准备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<Users> 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);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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("<tr>" +
            "<td>" + user.id + "</td>" +
            "<td>" + user.name + "</td>" +
            "<td>" + user.age + "</td>" +
            "</tr>")
        })
      })
      //访问失败
      .fail(function () {
        alert("ERROR!")
      })
  })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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

  <script type="text/javascript" src="js/loadDataAjax.js"></script>
1

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

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

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

  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.js</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.css</url-pattern>
  </servlet-mapping>
1
2
3
4
5
6
7
8

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小惠珠哦/article/detail/808688