如何在响应中通过JSON格式传递数据

在响应中通过JSON格式传递数据

　　步骤

  •  添加 jackson-annotations.jar、jackson-core.jar、jackson-databind.jar的jar包
  •  通过 jackson API 将 Java 对象转换为JSON 格式的数据
  • 修改响应头，设置响应类型为 application/json
  • 将结果基于字符输出流推回客户端浏览器
  •  在页面中通过 JavaScript 的 JSON.parse()函数将 JSON 格式的数据转换为 JavaScript 对象

通过 JSON 格式在响应中传递单个对象

需求：

　　1）定义一个 Users 类，包含 userid、username 属性。

复制代码
public class User {
    private Integer userid;
    private String username;

    public User(Integer userid, String username) {
        this.userid = userid;
        this.username = username;
    }

    public Integer getUserid() {
        return userid;
    }

    public void setUserid(Integer userid) {
        this.userid = userid;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }
}
复制代码

 

　　2）实例化一个 Users 对象，通过 JSON 格式将 Users 对象响应到客户端浏览器。

复制代码
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("/json")
public class JsonTest extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        User user1=new User(1,"zhangsan");

        //使用jackson的API将Users对象转换为JSON格式的字符串对象
        ObjectMapper objectMapper=new ObjectMapper();
        //将User对象转换成JSON格式的字符串对象
        String obj=objectMapper.writeValueAsString(user1);

        //使用字符流做数据的响应
        PrintWriter pw=resp.getWriter();
        //将转换完的obj对象推回给客户端
        pw.print(obj);
        //刷新流
        pw.flush();
        //关闭流
        pw.close();
    }
}
复制代码

 

　　3）将 Users 对象中的数据插入到页面中。

复制代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script>
        function but(){
            // 创建 XMLHttpRequest 对象
            var xhr=new XMLHttpRequest()
            //给定请求方式以及请求地址
            xhr.open("get","json")
            //发送请求（异步请求的发送）
            xhr.send();
            //send执行完毕后，立刻执行下列方法（将函数的地址赋给onreadystatechange）
            //回调，通过onreadystatechange回调自己写的函数
            xhr.onreadystatechange=function (){ //处理结果集的过程
                //0：open函数没有被调用
                //1：open函数正在被调用
                //2：send函数正在被调用
                //3：服务端正在返回结果
                //4：请求结束，并且服务端已经结束发送数据到客户端
                //4表示响应结束,200表示响应成功
                if (xhr.readyState==4 && xhr.status==200){
                    alert(xhr.responseText)
                    //通过JavaScript的内置对象JSON中的parse函数将JSON格式的字符串转换成Javascript对象
                    var obj=JSON.parse(xhr.responseText)
                    alert(obj.userid+" "+obj.username);
                    document.getElementById("span").innerHTML=obj.userid+" "+obj.username;
                }
            }
        }
    </script>
<body>
<span id="span"></span>
<input type="button" value="ok" onclick="but()"/>
</body>
</html>
复制代码

 

通过 JSON 格式在响应中传递多个对象

需求：

　　1）定义一个 Users 类，包含 userid、username 属性

复制代码
public class User {
    private Integer userid;
    private String username;

    public User(Integer userid, String username) {
        this.userid = userid;
        this.username = username;
    }

    public Integer getUserid() {
        return userid;
    }

    public void setUserid(Integer userid) {
        this.userid = userid;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }
}
复制代码

 

　　2）实例化多个 Users 对象，通过 JSON 格式将 Users 对象响应到客户端浏览器

复制代码
import com.fasterxml.jackson.databind.ObjectMapper;
import www.lin.pojo.User;

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;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/json2")
public class JsonTest2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //创建User对象
        User user1=new User(1,"zhangsan");
        User user2=new User(2,"lisi");
        User user3=new User(3,"wangwu");
        //创建list集合，将user对象放进list集合
        List<User> list=new ArrayList<>();
        list.add(user1);
        list.add(user2);
        list.add(user3);
        //使用jackson的API将List集合转换成JSON格式的字符串对象
        ObjectMapper objectMapper=new ObjectMapper();
        //将list集合转换成JSON格式的字符串对象
        String obj=objectMapper.writeValueAsString(list);
        System.out.println(list);
        //设置响应类型
        resp.setContentType("application/json");
        //使用字符流做数据的响应
        PrintWriter pw=resp.getWriter();
        //将获得的字符串推回给客户端
        pw.print(obj);
        pw.flush();
        pw.close();
    }

}
复制代码

　　3）将 Users 对象中的数据插入到页面

复制代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script>
        function but(){
            // 创建 XMLHttpRequest 对象
            var xhr=new XMLHttpRequest();
            //给定请求方式和请求地址
            xhr.open("get","json2")
            //发送请求（异步请求的发送）
            xhr.send()
            //send执行完毕后，立刻执行下列方法（将函数的地址赋给onreadystatechange）
            //回调函数，通过onreadystatechange回调自己写的函数
            xhr.onreadystatechange=function (){
                //4表示响应结束,200表示响应成功
                if (xhr.readyState==4 && xhr.status==200){
                    alert(xhr.responseText)
                    //通过JavaScript的内置对象JSON的parse方法将json格式字符串转换成JavaScript对象
                    var obj=JSON.parse(xhr.responseText)
                    var temp=""
                    for (i=0;i<obj.length;i++){
                        alert(obj[i].userid+" "+obj[i].username)
                        temp=temp+obj[i].userid+" "+obj[i].username+"</br>"
                    }
                    document.getElementById("span").innerHTML=temp
                }
            }

        }
    </script>
</head>
<body>
<span id="span"></span>
<input type="button" value="ok" onclick="but()"/>
</body>
</html>
复制代码

在JSON中通过Map传递数据

  • 　　在 JSON 格式中可以直接使用 Map 作为传递数据的模型。
  • 　　Map 结构本身就是 key 与 value 的结构，与 JSON 格式对象模型完全匹配，因此可以直接将一个 Map 对象转换为 JSON 　　格式的字符串对象。
  • 　　如果我们返回的数据并没有对应的模型来存放数据，要么创建新的模型，要么通过 Map 来解决，将Map当作通用模型。

servlet的创建

 

复制代码
import com.fasterxml.jackson.databind.ObjectMapper;

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;
import java.util.HashMap;
import java.util.Map;

@WebServlet("/map")
public class MapModelServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //创建map集合，一个map对象表示的是一个json格式的对象
        Map<String ,Object> map=new HashMap<>();
        //向map集合里添加数据
        map.put("userid",1);
        map.put("url","map.do");
        //使用Jackson的API将map集合转换成json格式的字符串
        ObjectMapper objectMapper=new ObjectMapper();
        //获取转换的字符串
        String obj=objectMapper.writeValueAsString(map);
        System.out.println(obj);
        //设置响应类型
        resp.setContentType("application/json");
        //获取响应字符流
        PrintWriter pw=resp.getWriter();
        //将结果推回给客户端
        pw.print(obj);
        //刷新流
        pw.flush();
        //关闭流
        pw.close();
    }
}
复制代码

 

jsp的创建

 

复制代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script>
        function but(){
            //创建XMLHttpRequest对象
            var xhr=new XMLHttpRequest()
            //给定请求方式和请求地址
            xhr.open("get","map")
            //异步请求的发送
            xhr.send()
            //send执行完毕后，立刻执行下列方法（将函数的地址赋给onreadystatechange）
            //回调函数，通过onreadystatechange回调自己写的函数
            xhr.onreadystatechange=function (){
                //0：open函数没有被调用
                //1：open函数正在被调用
                //2：send函数正在被调用
                //3：服务端正在返回结果
                //4：请求结束，并且服务端已经结束发送数据到客户端
                //4表示响应结束，200表示响应成功
                if (xhr.readyState==4 && xhr.status==200){
                    alert(xhr.responseText)
                    //通过JavaScript的内置对象JSON的parse方法将json格式字符串转换成JavaScript对象
                    var map=JSON.parse(xhr.responseText)
                    alert(map.userid)
                    alert(map.url)
                    document.getElementById("span").innerHTML=map.userid+" "+map.url
                }
            }
        }
    </script>
</head>
<body>
<span id="span"></span>
<input type="button" value="ok" onclick="but()">
</body>
</html>
复制代码

 

posted @   chaplu  阅读(496)  评论(0)  编辑  收藏  举报
相关博文：
· 如何在请求中通过JSON格式传递数据
· JSTL标签库与EL表达式的使用
· Gson、Jackson_Java对象转为json对象
· 2022.7.30 JSON Jackson FastJson
· JavaWeb基础学习笔记19——JSON
阅读排行：
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
点击右上角即可分享
微信分享提示