• json和axion结合

    目录

    java中使用JSON对象

    在pom.xml中导入依赖

    使用 public static String toJSONString(Object object)把自定义对象变成JSON对象

     json和axios综合案例

    使用的过滤器

    前端代码 

    响应和请求都是普通字符串 和 请求时普通字符串，响应是json字符串

    响应的数据是json数据

    结果

    json和axios综合案例进阶 

    在web层中，可以创建一个Result类，用来封装发给前端的数据

     Servlet类

     前端代码的书写

    结果

    java中使用JSON对象

    在pom.xml中导入依赖

    1.  <dependency>
    2.             <groupId>com.alibabagroupId>
    3.             <artifactId>fastjsonartifactId>
    4.             <version>1.2.47version>
    5.         dependency>

    json对象

    {key:value,key:value...}//key必须是字符串类型 

    使用 public static String toJSONString(Object object)把自定义对象变成JSON对象

    测试  

    1. public class User {
    2.     private String username;
    3.     private String password;
    4.  
    5.     public User() {
    6.     }
    7.  
    8.     public User(String username, String password) {
    9.         this.username = username;
    10.         this.password = password;
    11.     }
    12.  
    13.     public String getUsername() {
    14.         return username;
    15.     }
    16.  
    17.     public void setUsername(String username) {
    18.         this.username = username;
    19.     }
    20.  
    21.     public String getPassword() {
    22.         return password;
    23.     }
    24.  
    25.     public void setPassword(String password) {
    26.         this.password = password;
    27.     }
    28. }
    1. public class JsonTest {
    2.     //将一个对象转换成json对象
    3.     @Test
    4.     public void test() {
    5.         //创建一个User对象
    6.         User user = new User();
    7.         //赋值
    8.         user.setUsername("hhh");
    9.         user.setPassword("123");
    10.  
    11.         String jsonString = JSON.toJSONString(user);
    12.         System.out.println("json=" + jsonString);
    13.         //json={"password":"123","username":"hhh"}
    14.     }
    15.  
    16.     //单列集合转换成json对象
    17.     @Test
    18.     public void test1() {
    19.         //创建集合
    20.         List list = new ArrayList<>();
    21.         Collections.addAll(list, new User("hhh", "123"), new User("aaa", "345"));
    22.  
    23.         String jsonString = JSON.toJSONString(list);
    24.         System.out.println("json=" + jsonString);
    25.         /*
    26.         json=[
    27.             {"password":"123","username":"hhh"},
    28.             {"password":"345","username":"aaa"}
    29.         ]
    30.          */
    31.     }
    32.     //双列集合转换成json对象
    33.     @Test
    34.     public void test2()
    35.     {
    36.         //创建集合
    37.         Mapmap=new HashMap<>();
    38.         map.put("hhh1","aaa");
    39.         map.put("hhh2",new User("bbb","1"));
    40.         List list = new ArrayList<>();
    41.         Collections.addAll(list, new User("hhh", "123"), new User("aaa", "345"));
    42.         map.put("hhh3",list);
    43.         String jsonString = JSON.toJSONString(map);
    44.         System.out.println("json="+jsonString);
    45.         /*
    46.        json={
    47.         "hhh1":"aaa",
    48.         "hhh2":{"password":"1","username":"bbb"},
    49.         "hhh3":[{"password":"123","username":"hhh"},{"password":"345","username":"aaa"}]
    50.        }
    51.          */
    52.     }
    53.  
    54. }
    55.

     json和axios综合案例

    使用的过滤器

    1. @WebFilter("/*")
    2. public class EncodeFilter implements Filter {
    3.     @Override
    4.     public void init(FilterConfig filterConfig) throws ServletException {
    5.  
    6.     }
    7.  
    8.     @Override
    9.     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    10.         HttpServletRequest request = (HttpServletRequest) servletRequest;
    11.         HttpServletResponse response = (HttpServletResponse) servletResponse;
    12.         //your code..
    13.         //解决请求乱码
    14.         request.setCharacterEncoding("utf-8");
    15.         //解决响应乱码
    16.         response.setContentType("text/html;charset=utf-8");
    17.         response.addHeader(  "Access-Control-Allow-Origin","*");//允许所有来源访同
    18.         response.addHeader(  "Access-Control-Allow-Method","POST,GET");//允许访问的方式
    19.         //放行
    20.         filterChain.doFilter(request,response);
    21.     }
    22.  
    23.     @Override
    24.     public void destroy() {
    25.  
    26.     }
    27. }

    前端代码 

    1. <template>
    2.   <div id="app">
    3.       <h1>axois和json综合h1>
    4.  
    5.       
    6.         <input type="button" value="请求和响应都是普通字符串" @click="method1()"> <br>
    7.         <input type="button" value="响应数据是json字符串" @click="method2()"> <br>
    8.         <input type="button" value="请求数据是json字符串" @click="method3()"> <br>
    9.  
    10.         <hr>
    11.  
    12.         <h3>好友列表h3>
    13.         <table width="500px" cellspacing="0px" cellpadding="5px" border="1px" id="myTable">
    14.           <tr>
    15.             <th>idth>
    16.             <th>nameth>
    17.             <th>ageth>
    18.           tr>
    19.         table>
    20.  
    21.   div>
    22. template>
    23.  
    24. <script>
    25.  
    26. import axios  from 'axios';
    27. export default {
    28.   name: 'App',
    29.   methods:{
    30.     //1.响应和请求都是普通字符串
    31.     method1(){
    32.       //定义变量保存后端地址
    33.       let url="http://localhost:8080/ajaxJsonDemo1Servlet";
    34.       //定义参数
    35.       let params="username=何以以&password=123";
    36.       //发送请求
    37.       axios.post(url,params)
    38.         .then(res=>{
    39.         console.log(res.data);
    40.       })
    41.     },
    42.     //请求时普通字符串，响应改成json字符串
    43.     method2(){
    44.       //定义变量保存后端地址
    45.       let url="http://localhost:8080/ajaxJsonDemo2Servlet";
    46.       //定义参数
    47.       let params="username=何以以&password=123";
    48.       //发送请求
    49.       axios.post(url,params)
    50.         .then(res=>{
    51.         console.log(res.data);
    52.       })
    53.  
    54.     },
    55.     method3(){
    56.       //定义变量保存后端地址
    57.       let url="http://localhost:8080/ajaxJsonDemo3Servlet";
    58.       //json对象的 " " 每个引号之前都要加 \ 转义字符
    59.       let params="{\"username\":\"何以以\",\"password\":\"145\"}";
    60.       //发送请求
    61.       axios.post(url,params)
    62.       .then(res=>{
    63.         console.log(res.data);
    64.       }
    65.       )
    66.  
    67.     }
    68.   }
    69.   
    70. }
    71.  
    72. script>
    73.  
    74. <style>
    75. /* #app {
    76.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
    77.   -webkit-font-smoothing: antialiased;
    78.   -moz-osx-font-smoothing: grayscale;
    79.   text-align: center;
    80.   color: #2c3e50;
    81.   margin-top: 60px;
    82. } */
    83. style>

    响应和请求都是普通字符串 和 请求时普通字符串，响应是json字符串

    1. @WebServlet("/ajaxJsonDemo1Servlet")
    2. public class ajaxJsonDemo1Servlet extends HttpServlet {
    3.     @Override
    4.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    5.         //获取请求参数
    6.         String username = request.getParameter("username");
    7.         String password = request.getParameter("password");
    8.         //打印输出
    9.         System.out.println(username+"---"+password);
    10.  
    11.         //响应数据给前端
    12.         response.addHeader(  "Access-Control-Allow-Origin","*");//允许所有来源访同
    13.         response.addHeader(  "Access-Control-Allow-Method","POST,GET");//允许访问的方式
    14.         response.getWriter().print("后端已经成功接收到数据");
    15.     }
    16.  
    17.     @Override
    18.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    19.         doGet(request, response);
    20.     }
    21. }
    1. //请求时普通字符串，响应是json字符串
    2. @WebServlet("/ajaxJsonDemo2Servlet")
    3. public class ajaxJsonDemo2Servlet extends HttpServlet {
    4.     @Override
    5.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    6.         //请求时普通字符串，响应数据是json对象
    7.         //接收请求参数
    8.         String username = request.getParameter("username");
    9.         String password = request.getParameter("password");
    10.         //创建User对象
    11.         User user = new User();
    12.         //将数据封装到User对象中
    13.         user.setUsername(username);
    14.         user.setPassword(password);
    15.  
    16.         //将对象变成json对象
    17.         String jsonString = JSON.toJSONString(user);
    18.  
    19.         //响应数据给前端
    20.         response.addHeader(  "Access-Control-Allow-Origin","*");//允许所有来源访同
    21.         response.addHeader(  "Access-Control-Allow-Method","POST,GET");//允许访问的方式
    22.         response.getWriter().print(jsonString);
    23.     }
    24.  
    25.     @Override
    26.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    27.         doGet(request, response);
    28.     }
    29. }

    响应的数据是json数据

     request.getParameter("标识符");只能获取请求参数是普通字符串
            如果是json字符使用：
             1）使用request.getInputStream();//读取关联浏览器的字节输入流
             2）使用request.getReader();//读取关联浏览器的字符输入流
             所以我们可以使用获取流的方法结合JSON的方法一起解析前端提交的json数据
             public static final T pasreObject(InputStream is,Classclazz);
              参数：
                is:关联的浏览器字节输入流
                clazz:封装json请求参数的字节码对象
                注意：要求实体类的属性名必须与json的key一致
                let params="{\"username\":\"何以以\",\"password\":\"145\"}";
                User实体类的属性名必须是username和password 

    1. @WebServlet("/ajaxJsonDemo3Servlet")
    2. public class ajaxJsonDemo3Servlet extends HttpServlet {
    3.     @Override
    4.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    5.         //获取请求参数
    6.         //String username = request.getParameter("username");//获取不了，此方法只能获取普通参数的请求
    7.         /*
    8.         request.getParameter("标识符");只能获取请求参数是普通字符串
    9.         如果是json字符使用：
    10.          1）使用request.getInputStream();//读取关联浏览器的字节输入流
    11.          2）使用request.getReader();//读取关联浏览器的字符输入流
    12.          所以我们可以使用获取流的方法结合JSON的方法一起解析前端提交的json数据
    13.          public static final T pasreObject(InputStream is,Classclazz);
    14.           参数：
    15.             is:关联的浏览器字节输入流
    16.             clazz:封装json请求参数的字节码对象
    17.             注意：要求实体类的属性名必须与json的key一致
    18.             let params="{\"username\":\"何以以\",\"password\":\"145\"}";
    19.             User实体类的属性名必须是username和password
    20.          */
    21.         User user = JSON.parseObject(request.getInputStream(), User.class);
    22.         System.out.println("user="+user);//user=User{username='何以以', password='145'}
    23.        /* response.addHeader(  "Access-Control-Allow-Origin","*");//允许所有来源访同
    24.         response.addHeader(  "Access-Control-Allow-Method","POST,GET");//允许访问的方式*/
    25.         String jsonString = JSON.toJSONString(user);
    26.         response.getWriter().print(jsonString);
    27.     }
    28.  
    29.     @Override
    30.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    31.         doGet(request, response);
    32.     }
    33. }

    结果

    第二个的结果：

    第三个的结果

    json和axios综合案例进阶 

    在web层中，可以创建一个Result类，用来封装发给前端的数据

    1. public class Result {
    2.     private boolean flag;//执行结果，true为执行成功，false为执行失败
    3.     private String message;//返回结果信息
    4.     private Object valueDate;//返回数据（如果是查询操作就设置，增删不用设置）
    5.     public Result(){}
    6.     public Result(boolean flag, String message) {//失败，或者增删改
    7.         this.flag = flag;
    8.         this.message = message;
    9.     }
    10.     //成功的查询
    11.     public Result(boolean flag, String message, Object valueDate) {
    12.         this.flag = flag;
    13.         this.message = message;
    14.         this.valueDate = valueDate;
    15.     }
    16.  
    17.     public boolean isFlag() {
    18.         return flag;
    19.     }
    20.  
    21.     public void setFlag(boolean flag) {
    22.         this.flag = flag;
    23.     }
    24.  
    25.     public String getMessage() {
    26.         return message;
    27.     }
    28.  
    29.     public void setMessage(String message) {
    30.         this.message = message;
    31.     }
    32.  
    33.     public Object getValueDate() {
    34.         return valueDate;
    35.     }
    36.  
    37.     public void setValueDate(Object valueDate) {
    38.         this.valueDate = valueDate;
    39.     }
    40. }

     Servlet类

    1. @WebServlet("/ajaxJsonDemo3Servlet")
    2. public class ajaxJsonDemo3Servlet extends HttpServlet {
    3.     @Override
    4.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    5.         //获取请求参数
    6.         //String username = request.getParameter("username");//获取不了，此方法只能获取普通参数的请求
    7.         /*
    8.         request.getParameter("标识符");只能获取请求参数是普通字符串
    9.         如果是json字符使用：
    10.          1）使用request.getInputStream();//读取关联浏览器的字节输入流
    11.          2）使用request.getReader();//读取关联浏览器的字符输入流
    12.          所以我们可以使用获取流的方法结合JSON的方法一起解析前端提交的json数据
    13.          public static final T pasreObject(InputStream is,Classclazz);
    14.           参数：
    15.             is:关联的浏览器字节输入流
    16.             clazz:封装json请求参数的字节码对象
    17.             注意：要求实体类的属性名必须与json的key一致
    18.             let params="{\"username\":\"何以以\",\"password\":\"145\"}";
    19.             User实体类的属性名必须是username和password
    20.          */
    21.         User user = JSON.parseObject(request.getInputStream(), User.class);
    22.         System.out.println("user="+user);
    23.        /* response.addHeader(  "Access-Control-Allow-Origin","*");//允许所有来源访同
    24.         response.addHeader(  "Access-Control-Allow-Method","POST,GET");//允许访问的方式*/
    25.  
    26.         //模拟从数据库查出user信息的好友列表
    27.         List list=new ArrayList<>();
    28.         Collections.addAll(list,new User("蚂蚁","123"),new User("遗迹","125"));
    29.         //创建一个Result类对象
    30.         Result result = new Result(true, "查询用户成功", list);
    31.         //变成json对象
    32.         String jsonString = JSON.toJSONString(result);
    33.         //响应数据给前端
    34.         response.getWriter().print(jsonString);
    35.  
    36.     }
    37.  
    38.     @Override
    39.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    40.         doGet(request, response);
    41.     }

    发给前端的数据

     前端代码的书写

    1. <template>
    2.   <div id="app">
    3.       <h1>axois和json综合h1>
    4.  
    5.       
    6.         <input type="button" value="请求和响应都是普通字符串" @click="method1()"> <br>
    7.         <input type="button" value="响应数据是json字符串" @click="method2()"> <br>
    8.         <input type="button" value="请求数据是json字符串" @click="method3()"> <br>
    9.  
    10.         <hr>
    11.         <div id="messID">div> <br>
    12.         <h3>好友列表h3>
    13.         <table width="500px" cellspacing="0px" cellpadding="5px" border="1px" id="myTable">
    14.           <tr>
    15.             <th>名字th>
    16.             <th>密码th>     
    17.           tr>
    18.           
    19.         table>
    20.  
    21.   div>
    22. template>
    23.  
    24. <script>
    25.  
    26. import axios  from 'axios';
    27. export default {
    28.   name: 'App',
    29.   methods:{
    30.     //1.响应和请求都是普通字符串
    31.     method1(){
    32.       //定义变量保存后端地址
    33.       let url="http://localhost:8080/ajaxJsonDemo1Servlet";
    34.       //定义参数
    35.       let params="username=何以以&password=123";
    36.       //发送请求
    37.       axios.post(url,params)
    38.         .then(res=>{
    39.         console.log(res.data);
    40.       })
    41.     },
    42.     //请求时普通字符串，响应改成json字符串
    43.     method2(){
    44.       //定义变量保存后端地址
    45.       let url="http://localhost:8080/ajaxJsonDemo2Servlet";
    46.       //定义参数
    47.       let params="username=何以以&password=123";
    48.       //发送请求
    49.       axios.post(url,params)
    50.         .then(res=>{
    51.         console.log(res.data);
    52.         //从后端查到的数据{flag: true, mmessage: '查询用户成功', valueDate: Array(2)}
    53.         
    54.       })
    55.  
    56.     },
    57.     method3(){
    58.       //定义变量保存后端地址
    59.       let url="http://localhost:8080/ajaxJsonDemo3Servlet";
    60.       //json对象的 " " 每个引号之前都要加 \ 转义字符
    61.       let params="{\"username\":\"何以以\",\"password\":\"145\"}";
    62.       //发送请求
    63.       axios.post(url,params)
    64.       .then(res=>{
    65.         console.log(res.data);
    66.         //从后端查到的数据{flag: true, message: '查询用户成功', valueDate: Array(2)}
    67.         /*
    68.         valueDate{password: '123', username: '蚂蚁'},{password: '125', username: '遗迹'}
    69.         */
    70.         let obj=res.data;
    71.         if(obj.flag){
    72.           //查询成功
    73.           document.getElementById("messID").innerHTML=obj.message;
    74.           //设置空字符串
    75.           let content="";
    76.           let arr=obj.valueDate;
    77.           for(let a of arr){//a是数组中的每个json对象
    78.             content+=`
    79.             ${a.username}
    80.             ${a.password}
    81.           `
    82.           }
    83.           document.getElementById("myTable").innerHTML+=content;
    84.         }
    85.       }
    86.       )
    87.  
    88.     }
    89.   }
    90.   
    91. }
    92.  
    93. script>
    94.  
    95. <style>
    96. /* #app {
    97.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
    98.   -webkit-font-smoothing: antialiased;
    99.   -moz-osx-font-smoothing: grayscale;
    100.   text-align: center;
    101.   color: #2c3e50;
    102.   margin-top: 60px;
    103. } */
    104. style>

    结果

     点击第三个按钮

    由于我们会重复的从前端解析json,和发送json给前端，我们可以把那几个方法封装从工具类

    1. public class BaseController {
    2.     //静态方法解析前端提交的json数据 Class clazz=User.class
    3.     //定义泛型
    4.     //T parseToObject，Class clazz都是使用泛型
    5.     public static  T parseToObject(HttpServletRequest request,Class clazz)throws Exception{
    6.         T obj= JSON.parseObject(request.getInputStream(),clazz);
    7.         return obj;
    8.     }
    9.     //静态方法将后端的json数据响应到前端
    10.     public static void responseJsonToBrowser(HttpServletResponse response,Object obj)throws Exception{
    11.         //将result对象变成json
    12.         String jsonString = JSON.toJSONString(obj);
    13.         //响应数据给前端
    14.         response.getWriter().print(jsonString);
    15.     }
    16. }

     

  • 相关阅读:
    QtCreator 跨平台开发添加动态库教程（以OpenCV库举例）- Windows篇
    DatenLord前沿技术分享 No.38
    【源码】C++坦克大战源码
    一文入门 Spring Cloud Tencent
    机器学习助力基于优化理论的TDOA无源定位
    【牛客网刷题】（第二弹）中等难度题型来了.这些题你都会做吗？
    Linux下C++开发笔记--编译静态链接库和动态链接库
    二叉树题目：最大二叉树
    Android 内存泄漏
    Dock搭建FTP文件服务器
  • 原文地址：https://blog.csdn.net/luosuss/article/details/139397609