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

测试后端接口的访问

发生了乱码

解决一下，说到做到

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

                    });
                }
            });
        }

效果