html界面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax测试</title>
</head>
<body>
<table>
<thead>
<tr>id</tr>
<tr>name</tr>
<tr>tag</tr>
</thead>
<tbody id="tList">
</tbody>
</table>
<button onclick="getlist()">获取</button>
<script src="js/jquery-3.4.1.js"></script>
<script>
function getlist() {
var xhr = null;
//判断当前浏览器是否支持XMLHttpRequest对象,如果支持则创建
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
//老版本的ie浏览器使用ActiveX对象
xhr = new ActiveXObject("Microsoft.XMlHTTP");
}
//设置回调函数
xhr.onreadystatechange = function () {
//xhr.readyState返回一个XMLRequest代理当前所处的状态,readyState 4 表示当前界面加载完成,status 200 代表是一个成功的请求
if (xhr.readyState == 4 && xhr.status == 200) {
//获取响应文本并解析转换为JavaScript 对象
var arr = JSON.parse(xhr.responseText);
//遍历数组并添加到表格中
$.each(arr, function (i, n) {
$('#tList').append("<tr> <td>" + n.id + "<td>" + n.name + "</td>" + "<td>" + n.tag + "</td>" + "</tr>")
})
}
}
//设置open 请求方式为post, url为/do , true为异步请求方式,false为同步方式
xhr.open("post", "/do", true);
//发送请求
xhr.send();
}
</script>
</body>
</html>
Servlet
后台就是把一个对象集合转换为jsonString传给前端
@WebServlet("/do")
public class ServletDemo extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
Teacher teacher = new Teacher(1, "熊根滔", "zz");
Teacher teacher1 = new Teacher(2, "熊根滔", "z");
Teacher teacher2 = new Teacher(3, "熊根滔", "zz");
Teacher teacher3 = new Teacher(4, "熊根滔", "saf");
Teacher teacher4 = new Teacher(5, "熊根滔", "asf");
Teacher teacher5 = new Teacher(6, "熊根滔", "sfh");
Teacher teacher6 = new Teacher(7, "熊根滔", "sdg");
List<Teacher> teachers = new ArrayList<>();
teachers.add(teacher);
teachers.add(teacher1);
teachers.add(teacher2);
teachers.add(teacher3);
teachers.add(teacher5);
teachers.add(teacher4);
teachers.add(teacher6);
//将集合转换为json字符串
String zz = JSON.toJSONString(teachers);
//传给前端
resp.getWriter().println(zz);
}
}