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

喜欢ヅ旅行 2024-03-16 21:46 120阅读 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>