0
点赞
收藏
分享

微信扫一扫

json数据的使用演练 配合tomcat


后端 定义接口 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);
}
}

测试后端接口的访问

发生了乱码

json数据的使用演练 配合tomcat_json

解决一下,说到做到

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);
}

结果

json数据的使用演练 配合tomcat_java_02

前端发ajax请求拿到这个json数据

发ajax请求拿响应

json数据的使用演练 配合tomcat_json数据_03

拿到响应后直接处理

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);

});
}
});
}

效果

json数据的使用演练 配合tomcat_json_04



举报

相关推荐

0 条评论