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中导入依赖

 <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.47</version>
        </dependency>

json对象

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

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

测试

public class User {
    private String username;
    private String password;

    public User() {
    }

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

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

public class JsonTest {
    //将一个对象转换成json对象
    @Test
    public void test() {
        //创建一个User对象
        User user = new User();
        //赋值
        user.setUsername("hhh");
        user.setPassword("123");

        String jsonString = JSON.toJSONString(user);
        System.out.println("json=" + jsonString);
        //json={"password":"123","username":"hhh"}
    }

    //单列集合转换成json对象
    @Test
    public void test1() {
        //创建集合
        List<User> list = new ArrayList<>();
        Collections.addAll(list, new User("hhh", "123"), new User("aaa", "345"));

        String jsonString = JSON.toJSONString(list);
        System.out.println("json=" + jsonString);
        /*
        json=[
            {"password":"123","username":"hhh"},
            {"password":"345","username":"aaa"}
        ]
         */
    }
    //双列集合转换成json对象
    @Test
    public void test2()
    {
        //创建集合
        Map<String,Object>map=new HashMap<>();
        map.put("hhh1","aaa");
        map.put("hhh2",new User("bbb","1"));
        List<User> list = new ArrayList<>();
        Collections.addAll(list, new User("hhh", "123"), new User("aaa", "345"));
        map.put("hhh3",list);
        String jsonString = JSON.toJSONString(map);
        System.out.println("json="+jsonString);
        /*
       json={
        "hhh1":"aaa",
        "hhh2":{"password":"1","username":"bbb"},
        "hhh3":[{"password":"123","username":"hhh"},{"password":"345","username":"aaa"}]
       }
         */
    }

}

json和axios综合案例

使用的过滤器

@WebFilter("/*")
public class EncodeFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        //your code..
        //解决请求乱码
        request.setCharacterEncoding("utf-8");
        //解决响应乱码
        response.setContentType("text/html;charset=utf-8");
        response.addHeader(  "Access-Control-Allow-Origin","*");//允许所有来源访同
        response.addHeader(  "Access-Control-Allow-Method","POST,GET");//允许访问的方式
        //放行
        filterChain.doFilter(request,response);
    }

    @Override
    public void destroy() {

    }
}

前端代码

<template>
  <div id="app">
      <h1>axois和json综合</h1>

      <!-- 点击此按钮就会执行method1()函数 -->
        <input type="button" value="请求和响应都是普通字符串" @click="method1()"> <br>
        <input type="button" value="响应数据是json字符串" @click="method2()"> <br>
        <input type="button" value="请求数据是json字符串" @click="method3()"> <br>

        <hr>

        <h3>好友列表</h3>
        <table width="500px" cellspacing="0px" cellpadding="5px" border="1px" id="myTable">
          <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
          </tr>
        </table>

  </div>
</template>

<script>

import axios  from 'axios';
export default {
  name: 'App',
  methods:{
    //1.响应和请求都是普通字符串
    method1(){
      //定义变量保存后端地址
      let url="http://localhost:8080/ajaxJsonDemo1Servlet";
      //定义参数
      let params="username=何以以&password=123";
      //发送请求
      axios.post(url,params)
        .then(res=>{
        console.log(res.data);
      })
    },
    //请求时普通字符串，响应改成json字符串
    method2(){
      //定义变量保存后端地址
      let url="http://localhost:8080/ajaxJsonDemo2Servlet";
      //定义参数
      let params="username=何以以&password=123";
      //发送请求
      axios.post(url,params)
        .then(res=>{
        console.log(res.data);
      })

    },
    method3(){
      //定义变量保存后端地址
      let url="http://localhost:8080/ajaxJsonDemo3Servlet";
      //json对象的 " " 每个引号之前都要加 \ 转义字符
      let params="{\"username\":\"何以以\",\"password\":\"145\"}";
      //发送请求
      axios.post(url,params)
      .then(res=>{
        console.log(res.data);
      }
      )

    }
  }
  
}

</script>

<style>
/* #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>

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

@WebServlet("/ajaxJsonDemo1Servlet")
public class ajaxJsonDemo1Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取请求参数
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        //打印输出
        System.out.println(username+"---"+password);

        //响应数据给前端
        response.addHeader(  "Access-Control-Allow-Origin","*");//允许所有来源访同
        response.addHeader(  "Access-Control-Allow-Method","POST,GET");//允许访问的方式
        response.getWriter().print("后端已经成功接收到数据");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

//请求时普通字符串，响应是json字符串
@WebServlet("/ajaxJsonDemo2Servlet")
public class ajaxJsonDemo2Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //请求时普通字符串，响应数据是json对象
        //接收请求参数
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        //创建User对象
        User user = new User();
        //将数据封装到User对象中
        user.setUsername(username);
        user.setPassword(password);

        //将对象变成json对象
        String jsonString = JSON.toJSONString(user);

        //响应数据给前端
        response.addHeader(  "Access-Control-Allow-Origin","*");//允许所有来源访同
        response.addHeader(  "Access-Control-Allow-Method","POST,GET");//允许访问的方式
        response.getWriter().print(jsonString);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

响应的数据是json数据

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

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

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

结果

第二个的结果：

第三个的结果

json和axios综合案例进阶

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

public class Result {
    private boolean flag;//执行结果，true为执行成功，false为执行失败
    private String message;//返回结果信息
    private Object valueDate;//返回数据（如果是查询操作就设置，增删不用设置）
    public Result(){}
    public Result(boolean flag, String message) {//失败，或者增删改
        this.flag = flag;
        this.message = message;
    }
    //成功的查询
    public Result(boolean flag, String message, Object valueDate) {
        this.flag = flag;
        this.message = message;
        this.valueDate = valueDate;
    }

    public boolean isFlag() {
        return flag;
    }

    public void setFlag(boolean flag) {
        this.flag = flag;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Object getValueDate() {
        return valueDate;
    }

    public void setValueDate(Object valueDate) {
        this.valueDate = valueDate;
    }
}

Servlet类

@WebServlet("/ajaxJsonDemo3Servlet")
public class ajaxJsonDemo3Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取请求参数
        //String username = request.getParameter("username");//获取不了，此方法只能获取普通参数的请求
        /*
        request.getParameter("标识符");只能获取请求参数是普通字符串
        如果是json字符使用：
         1）使用request.getInputStream();//读取关联浏览器的字节输入流
         2）使用request.getReader();//读取关联浏览器的字符输入流
         所以我们可以使用获取流的方法结合JSON的方法一起解析前端提交的json数据
         public static final<T> T pasreObject(InputStream is,Class<T>clazz);
          参数：
            is:关联的浏览器字节输入流
            clazz:封装json请求参数的字节码对象
            注意：要求实体类的属性名必须与json的key一致
            let params="{\"username\":\"何以以\",\"password\":\"145\"}";
            User实体类的属性名必须是username和password
         */
        User user = JSON.parseObject(request.getInputStream(), User.class);
        System.out.println("user="+user);
       /* response.addHeader(  "Access-Control-Allow-Origin","*");//允许所有来源访同
        response.addHeader(  "Access-Control-Allow-Method","POST,GET");//允许访问的方式*/

        //模拟从数据库查出user信息的好友列表
        List<User> list=new ArrayList<>();
        Collections.addAll(list,new User("蚂蚁","123"),new User("遗迹","125"));
        //创建一个Result类对象
        Result result = new Result(true, "查询用户成功", list);
        //变成json对象
        String jsonString = JSON.toJSONString(result);
        //响应数据给前端
        response.getWriter().print(jsonString);

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

发给前端的数据

前端代码的书写

<template>
  <div id="app">
      <h1>axois和json综合</h1>

      <!-- 点击此按钮就会执行method1()函数 -->
        <input type="button" value="请求和响应都是普通字符串" @click="method1()"> <br>
        <input type="button" value="响应数据是json字符串" @click="method2()"> <br>
        <input type="button" value="请求数据是json字符串" @click="method3()"> <br>

        <hr>
        <div id="messID"></div> <br>
        <h3>好友列表</h3>
        <table width="500px" cellspacing="0px" cellpadding="5px" border="1px" id="myTable">
          <tr>
            <th>名字</th>
            <th>密码</th>     
          </tr>
          
        </table>

  </div>
</template>

<script>

import axios  from 'axios';
export default {
  name: 'App',
  methods:{
    //1.响应和请求都是普通字符串
    method1(){
      //定义变量保存后端地址
      let url="http://localhost:8080/ajaxJsonDemo1Servlet";
      //定义参数
      let params="username=何以以&password=123";
      //发送请求
      axios.post(url,params)
        .then(res=>{
        console.log(res.data);
      })
    },
    //请求时普通字符串，响应改成json字符串
    method2(){
      //定义变量保存后端地址
      let url="http://localhost:8080/ajaxJsonDemo2Servlet";
      //定义参数
      let params="username=何以以&password=123";
      //发送请求
      axios.post(url,params)
        .then(res=>{
        console.log(res.data);
        //从后端查到的数据{flag: true, mmessage: '查询用户成功', valueDate: Array(2)}
        
      })

    },
    method3(){
      //定义变量保存后端地址
      let url="http://localhost:8080/ajaxJsonDemo3Servlet";
      //json对象的 " " 每个引号之前都要加 \ 转义字符
      let params="{\"username\":\"何以以\",\"password\":\"145\"}";
      //发送请求
      axios.post(url,params)
      .then(res=>{
        console.log(res.data);
        //从后端查到的数据{flag: true, message: '查询用户成功', valueDate: Array(2)}
        /*
        valueDate{password: '123', username: '蚂蚁'},{password: '125', username: '遗迹'}
        */
        let obj=res.data;
        if(obj.flag){
          //查询成功
          document.getElementById("messID").innerHTML=obj.message;
          //设置空字符串
          let content="";
          let arr=obj.valueDate;
          for(let a of arr){//a是数组中的每个json对象
            content+=`<tr>
            <td>${a.username}</td>
            <td>${a.password}</td>
          </tr>`
          }
          document.getElementById("myTable").innerHTML+=content;
        }
      }
      )

    }
  }
  
}

</script>

<style>
/* #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>

结果

点击第三个按钮

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

public class BaseController {
    //静态方法解析前端提交的json数据 Class clazz=User.class
    //<T>定义泛型
    //T parseToObject，Class<T> clazz都是使用泛型
    public static <T> T parseToObject(HttpServletRequest request,Class<T> clazz)throws Exception{
        T obj= JSON.parseObject(request.getInputStream(),clazz);
        return obj;
    }
    //静态方法将后端的json数据响应到前端
    public static void responseJsonToBrowser(HttpServletResponse response,Object obj)throws Exception{
        //将result对象变成json
        String jsonString = JSON.toJSONString(obj);
        //响应数据给前端
        response.getWriter().print(jsonString);
    }
}