后端 定义接口 student_list
功能是返回数据给前端
如果前端发ajax请求
将会获得json数据
package servlet;
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.io.PrintWriter;
@WebServlet("/student_list")
public class StudentList extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 返回json数据给前端
// [{"name":"张三","age":16},{"name":"李四","age":22}]
String stu_list = "[{\"name\":\"张三\",\"age\":16},{\"name\":\"李四\",\"age\":22}]";
// 返回数据
PrintWriter writer = resp.getWriter();
writer.write(stu_list);
}
}
测试后端接口的访问
发生了乱码
解决一下,说到做到
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 说到
resp.setHeader("Content-Type","text/html;charset=utf-8");
// 做到
resp.setCharacterEncoding("utf-8");
// 返回json数据给前端
// [{"name":"张三","age":16},{"name":"李四","age":22}]
String stu_list = "[{\"name\":\"张三\",\"age\":16},{\"name\":\"李四\",\"age\":22}]";
// 返回数据
PrintWriter writer = resp.getWriter();
writer.write(stu_list);
}
结果
前端发ajax请求拿到这个json数据
发ajax请求拿响应
拿到响应后直接处理
function btn_click() {
$.ajax({
url:"student_list",
data:{},
type:"get",
dataType:"json",
success:function (result) {
// 遍历这个json数据,进行相关操作
$.each(result,function (idx,item) {
// 新建行,并把行添加到table中
var $tr = $("<tr>");
$("table").append($tr);
// 新建第一个td
var $td1 = $("<td>");
$td1.text(item.name); // <td>张三</td>
$tr.append($td1);
// 新建第二个td
var $td2 = $("<td>");
$td2.text(item.age); // <td>16</td>
$tr.append($td2);
});
}
});
}
效果