json数据的使用演练配合tomcat

鲸鱼编程pyhui

于 2022-05-21 12:45:07 发布

阅读量258

点赞数

文章标签： json tomcat 前端

本文链接：https://blog.csdn.net/ifubing/article/details/124894932

版权

本文探讨了如何在Java Servlet中正确设置Content-Type和字符编码，以确保后端返回的JSON数据在前端Ajax请求中不出现乱码。通过修改`doGet`方法并设置适当的编码，解决了前后端数据交互的问题。

摘要由CSDN通过智能技术生成

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

                    });
                }
            });
        }