JavaEE Ajax处理 json 数据
- 一、项目准备
- 二、编写前端表单界面
- 2.1 html 部分
- 2.2 js 部分（ajax 编写）
- 三、后端请求处理
- 3.1 mysql 建表
- 3.2 编写 BaseDao
- 3.3 编写 Student 实体类
- 3.4 编写 GetStuServlet
- 四、运行结果
一、项目准备
- 使用 searchStudent.jsp 编写查询学生的界面（使用模糊查询）
- 编写 GetStuServlet 用来处理查询请求，并通过JSONobj 序列化返回数据
- 使用 mysql 数据库，建一张名为 student 表，字段为 sid，sname，sage，sgender
- 需要用到 jquery库，bootstrap 库（非必要），JSONobj 的六个必要的库，mysql 驱动
JSONobj 需要的同学，需要 mysql 驱动的，我已经上传至 Github，里面也整理了一些我学习会常用到的 jar包 Jar 包下载链接
二、编写前端表单界面
2.1 html 部分
这里使用了 BootStrap， jquery 库
代码语言：javascript复制<%@ 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 请求的部分
代码语言：javascript复制 $("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 建表
建立如下表
代码语言：javascript复制create table(
id int(3) primary key,
sname varchar(20),
sage int(3),
sgender enum('男','女')
);并插入一些测试数据
3.2 编写 BaseDao
封装 BaseDao，用于简化 JDBC 的处理
代码语言：javascript复制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 当中
代码语言：javascript复制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 格式，这样才方便返回到前端，并且显示数据。
解释一下，我在里面每一步都把结果打印输出一遍，这样即使报错了也可以快速定位到是哪里出错了
代码语言：javascript复制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);
}
}四、运行结果
