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 的六个必要的库，mysqk 驱动
JSONobj 需要的同学，需要 mysql 驱动的，我已经上传至 Github，里面也整理了一些我学习会常用到的 jar包
Jar 包下载链接
二、编写前端表单界面
2.1 html 部分
<%@ 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;">
<!-- 这里的表格内容将由 js 来动态加载实现 -->
</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 = "<thead><tr><td>学生id</td><td>学生姓名</td><td>学生年龄</td><td>学生性别</td></tr></thead>";
$("table").html(msg);
// each() 是 JQuery 的遍历语法
$(data).each(function (i,s) {
msg+="<tbody><tr>";
msg+="<td>"+s.sid+"</td>";
msg+="<td>"+s.sname+"</td>";
msg+="<td>"+s.sage+"</td>";
msg+="<td>"+s.sgender+"</td>";
msg+="</tr></tbody>";
})
// 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);
}
}
四、运行结果
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦