JavaEE 使用 JQuery 完成 ajax & json 数据的传输

Gorit

发布于 2021-12-08 21:46:44

1.6K0

发布于 2021-12-08 21:46:44

文章被收录于专栏：Gorit 带你学全栈系列

JavaEE + Ajax处理 json 数据

一、项目准备

使用 searchStudent.jsp 编写查询学生的界面（使用模糊查询）
编写 GetStuServlet 用来处理查询请求，并通过JSONobj 序列化返回数据
使用 mysql 数据库，建一张名为 student 表，字段为 sid，sname，sage，sgender
需要用到 jquery库，bootstrap 库（非必要），JSONobj 的六个必要的库，mysql 驱动

JSONobj 需要的同学，需要 mysql 驱动的，我已经上传至 Github，里面也整理了一些我学习会常用到的 jar包 Jar 包下载链接

二、编写前端表单界面

2.1 html 部分

这里使用了 BootStrap， jquery 库

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<script type="text/javascript" src="bootstrap/js/jquery-3.3.1.js">script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js">script>
    <title>查询学生title>
head>
<body>
<div class="container">
    <input type="text"> <button class="btn btn-primary" value="查询">查询button>
    <table class="table table-striped table-bordered text-center table-hover table-condensed" style="margin-top: 20px;">
	
    table>
div>

body>
html>

2.2 js 部分（ajax 编写）

我使用 JQuery 来完成 ajax 请求的部分

    $("button").on('click',function () {
    	// 获取用户在输入框中
        let name = $("input:first").val();
        $.ajax({
            url:"GetStuServlet",
            type:"post",
            data: {
                sname:name
            },
            dataType:"json",//这里必须加上，这样做游览器会对 json 有更好的解析
            success:function (data) {
                console.log(data);
                // 使用字符串拼接的方式形成表格
                let msg = "学生id学生姓名学生年龄学生性别";
                $("table").html(msg);
                // each() 是 JQuery 的遍历语法
                $(data).each(function (i,s) {
                    msg+="";
                    msg+=""+s.sid+"";
                    msg+=""+s.sname+"";
                    msg+=""+s.sage+"";
                    msg+=""+s.sgender+"";
                    msg+="";
                })
                // console.log(msg);
                $("table").html(msg);
            },error:function (msg) {
                console.error(msg);
            }
        })
    })

三、后端请求处理

3.1 mysql 建表

建立如下表

create table(
	id int(3) primary key,
	sname varchar(20),
	sage int(3),
	sgender enum('男','女')
);

并插入一些测试数据

3.2 编写 BaseDao

封装 BaseDao，用于简化 JDBC 的处理

import java.sql.*;

public class BaseDao {
    private String Driver = "com.mysql.jdbc.Driver";
    private static final String URL = "jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf8";
    private static final String USERNAME = "root";
    private static final String PASSWORD = "root";
    private Connection con = null;

    // 获取连接
    public PreparedStatement getConnect(String sql) throws SQLException {
        PreparedStatement ps = null;

        try {
            Class.forName(Driver);

            con = DriverManager.getConnection(URL,USERNAME,PASSWORD);

            ps = con.prepareStatement(sql);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return ps;
    }

    // 关闭连接
    public void closed(PreparedStatement ps, ResultSet set) throws SQLException {
        if (ps!=null) {
            ps.close();
        }

        if (set!=null) {
            set.close();
        }

        if (con!=null) {
            con.close();
        }
    }

}

3.3 编写 Student 实体类

后面从数据库中查出来的数据，我们要存储到 ArrayList 当中

public class Student {
    private Integer sid;
    private String sname;
    private Integer sage;
    private String sgender;

    public Student(Integer sid, String sname, Integer sage, String sgender) {
        this.sid = sid;
        this.sname = sname;
        this.sage = sage;
        this.sgender = sgender;
    }

	// getter 和 setter 省略，无参构造省略，这里用不到
    @Override
    public String toString() {
        return "Student{" +
                "sid=" + sid +
                ", sname='" + sname + '\'' +
                ", sage=" + sage +
                ", sgender='" + sgender + '\'' +
                '}';
    }
}

3.4 编写 GetStuServlet

这里逻辑其实不复杂，使用 ArrayList 存储查出来的学生，在使用 JSONobj 把 ArrayList 集合转换成 JSON 格式，这样才方便返回到前端，并且显示数据。

解释一下，我在里面每一步都把结果打印输出一遍，这样即使报错了也可以快速定位到是哪里出错了

import cn.gorit.entity.Student; // 前面编写的 Student 实体类
import cn.gorit.util.BaseDao;	// 前面封装的 BaseDao
import net.sf.json.JSONArray;   // 使用第三方 jar 包

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.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/GetStuServlet")
public class GetStuServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        request.setCharacterEncoding("utf-8");
        String name = request.getParameter("sname"); // 接收 ajax 传过来的用户输入的内容
        System.out.println(name);  
        BaseDao db = new BaseDao();
        List<Student> list = new ArrayList<Student>();  // 使用泛型
        try {
            PreparedStatement ps = db.getConnect("select * from student where sname like ?");
            ps.setString(1,"%"+name+"%"); // 做模糊查询
            ResultSet rs = ps.executeQuery();
            while (rs.next()) {
                System.out.println(rs.getInt(1)+" "+rs.getString(2)+" "+rs.getInt(3)+" "+rs.getString(4));
                list.add(new Student(rs.getInt(1),rs.getString(2),rs.getInt(3),rs.getString(4)));
            }
            db.closed(ps,rs);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        System.out.println(list.toString());
        // 集合转换为一个方便输出并且 js 也可以编译的格式
        // 字符串不需要转为 json 格式 对象需要转为 json 格式
        JSONArray ja = JSONArray.fromObject(list);
        response.setCharacterEncoding("utf-8");
        response.getWriter().print(ja.toString()); // 将生成的 json 数据返回给 前端页面
    }

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