如何将JSON响应从后端发送到前端JSP页面

佛系豪豪吖

于 2023-06-22 19:10:58 发布

阅读量545

点赞数 1

分类专栏：笔记 IDEA 文章标签： java 前端 json

佛系豪豪博客

本文链接：https://blog.csdn.net/qq_44724480/article/details/131332374

版权

笔记同时被 2 个专栏收录

73 篇文章 3 订阅

订阅专栏

IDEA

12 篇文章 0 订阅

订阅专栏

如何将JSON响应从后端发送到前端JSP页面

后端Servlet代码：

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

public class MyServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 构造一个Map对象，作为返回的JSON数据
        Map<String, String> responseData = new HashMap<>();
        responseData.put("name", "John");
        responseData.put("age", "30");

        // 将Map转换为JSON字符串
        Gson gson = new Gson();
        String jsonResponse = gson.toJson(responseData);

        // 设置响应的Content-Type为application/json
        resp.setContentType("application/json");

        // 获取输出流，将JSON数据写入响应
        PrintWriter out = resp.getWriter();
        out.print(jsonResponse);
        out.flush();
    }
}

在JSP页面中，使用jQuery从后端获取JSON数据并在页面上展示：

<html>
<head>
 <title>My Page</title>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <script>
   $(document).ready(function() {
     // 发送GET请求获取JSON数据
     $.get("myservlet", function(data) {
       // 在页面上展示JSON数据
       $("#name").text(data.name);
       $("#age").text(data.age);
     });
   });
 </script>
</head>
<body>
 <h1>My Info</h1>
 <p>Name: <span id="name"></span></p>
 <p>Age: <span id="age"></span></p>
</body>
</html>