javaweb学习笔记day14---JSON、AJAX

最新推荐文章于 2023-09-25 00:56:59 发布

Mr.W.code

最新推荐文章于 2023-09-25 00:56:59 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/Wynb1020/article/details/121947795

版权

java 同时被 3 个专栏收录

37 篇文章 0 订阅

订阅专栏

servlet

9 篇文章 0 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

本文详细介绍了JSON数据交换格式的语法、注意事项，并展示了如何使用Jackson库进行Java对象与JSON字符串的相互转换。此外，还探讨了AJAX的核心概念，包括异步请求、局部刷新页面，以及XMLHttpRequest对象的使用方法。最后，通过实例讲解了使用Axios进行AJAX请求的两种方式，并展示了JSONUtils工具类的优化及其在实际应用中的作用。

摘要由CSDN通过智能技术生成

JSON介绍

概述

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。是ECMAScript的一个子集。

语法
一个对象

{
    "pId":1,
    "pName":"湖北省"
}

多个对象

[
    {
        "pId":1,
        "pName":"湖北省",
        "isCenter":false
    },
    {
        "pId":2,
        "pName":"湖南省",
        "isCenter":false
    },
    {
        "pId":3,
        "pName":"北京市",
        "isCenter":true
    }
    
]

JSON格式化网址
- JSON在线解析及格式化验证 - JSON.cn
注意事项
- json中没有注释。

Jackson的使用

概述
- 是一个用于操作json的类库。
作用
- ①将java对象转换为json字符串
  - writeValueAsString
- ②将json字符串转换为java对象
  - readValue
①将java对象转换为json字符串

/**
 * ①将java对象转换为json字符串
 */
public class Demo01 {


    public static void main(String[] args) throws JsonProcessingException {
        //1.1，将一个对象转换为json字符串
        Province province1 = new Province(1, "湖北省", false);
        String jsonStr1 = new ObjectMapper().writeValueAsString(province1);
        System.out.println("jsonStr1 = " + jsonStr1);
        //1.2,将list转换为json字符串
        List<Province> provinceList = new ArrayList<>();
        provinceList.add(province1);
        Province province2 = new Province(2, "湖南省", false);
        provinceList.add(province2);
        Province province3 = new Province(3, "北京市", true);
        provinceList.add(province3);
        String jsonStr2 = new ObjectMapper().writeValueAsString(provinceList);
        System.out.println("jsonStr2 = " + jsonStr2);
        //1.3,将map转换为json字符串 , {"flag":true,"msg":"查询省份列表成功!",data:集合}
        Map<String, Object> map = new HashMap<>();
        map.put("flag", true);
        map.put("msg", "查询省份列表成功!");
        map.put("data", provinceList);
        String jsonStr3 = new ObjectMapper().writeValueAsString(map);
        System.out.println("jsonStr3 = " + jsonStr3);
        //1.3,将ResultVO转换为json字符串 , {"flag":true,"msg":"查询省份列表成功!",data:集合}
        ResultVO<List<Province>> resultVO = new ResultVO<>(
                true,
                "查询省份列表成功!",
                provinceList
        );
        String jsonStr4 = new ObjectMapper().writeValueAsString(resultVO);
        System.out.println("jsonStr4 = " + jsonStr4);


    }


}

②将json字符串转换为java对象

public class Demo02 {


    public static void main(String[] args) throws IOException {
        //2.1，将json字符串转换为java对象
        String jsonStr1 = "{\"provinceId\":1,\"provinceName\":\"湖北省\",\"capital\":false}";
        Province province = new ObjectMapper().readValue(jsonStr1, Province.class);
        System.out.println("province = " + province);

        //2.2，将json字符串转换为list
        String jsonStr2 = "[{\"provinceId\":1,\"provinceName\":\"湖北省\",\"capital\":false},{\"provinceId\":2,\"provinceName\":\"湖南省\",\"capital\":false},{\"provinceId\":3,\"provinceName\":\"北京市\",\"capital\":true}]\n";
        List<Province> provinceList = new ObjectMapper().readValue(jsonStr2, List.class);
        System.out.println("provinceList = " + provinceList);

        //2.3，将json字符串转换为map
        String jsonStr3 = "{\"msg\":\"查询省份列表成功!\",\"flag\":true,\"data\":[{\"provinceId\":1,\"provinceName\":\"湖北省\",\"capital\":false},{\"provinceId\":2,\"provinceName\":\"湖南省\",\"capital\":false},{\"provinceId\":3,\"provinceName\":\"北京市\",\"capital\":true}]}";
        Map<String,Object> map = new ObjectMapper().readValue(jsonStr3, Map.class);
        System.out.println("map = " + map);

        //2.4，将json字符串转换为ResultVO
        String jsonStr4 = "{\"msg\":\"查询省份列表成功!\",\"flag\":true,\"data\":[{\"provinceId\":1,\"provinceName\":\"湖北省\",\"capital\":false},{\"provinceId\":2,\"provinceName\":\"湖南省\",\"capital\":false},{\"provinceId\":3,\"provinceName\":\"北京市\",\"capital\":true}]}";

        ResultVO resultVO = new ObjectMapper().readValue(jsonStr4, ResultVO.class);
        System.out.println("resultVO = " + resultVO);
    }




}

JSONUtils工具类

代码实现

public class JSONUtils {


    /**
     * 将java对象转换为json字符串
     *
     * @param object
     * @return
     * @throws JsonProcessingException
     */
    public static String javaBean2JsonStr(Object object) throws JsonProcessingException {
        return new ObjectMapper().writeValueAsString(object);
    }


    /**
     * ②将json字符串转换为java对象
     * @param jsonStr
     * @param clazz
     * @param <T>
     * @return
     * @throws IOException
     */
    public static <T> T jsonStr2Javabean(String jsonStr, Class<T> clazz) throws IOException {
        return new ObjectMapper().readValue(jsonStr, clazz);
    }


}

AJAX概述

概述
- AJAX即“Asynchronous Javascript And XML” ：异步的JavaScript和XML。
作用
- ①发起异步请求
- ②局部刷新页面
①发起异步请求
②局部刷新页面
- 通过异步请求达到页面的局部刷新效果，从而提高程序执行的效率

XMLHttpRequest详细介绍

概述
- ajax异步请求对象

创建对象

XMLHttpRequest xhr = new XMLHttpRequest();

常用属性
- onreadystatechange
  - 设置监听XMLHttpRequest对象状态改变
- readyState : XMLHttpRequest对象状态
  - 0 : XMLHttpRequest对象还没有完成初始化
  - 1 : XMLHttpRequest对象开始发送请求
  - 2 : XMLHttpRequest对象发送请求完成
  - 3 : XMLHttpRequest对象开始读取响应
  - 4 : XMLHttpRequest对象读取响应完成
- status
  - 服务器的响应状态码
- responseText
  - 服务器的响应正文
常用方法
- open(请求方式,请求路径,flag)
  - 请求方式：get/post
  - 请求路径：请求资源的路径
  - flag : true：异步请求，false：同步请求
- send(请求参数)
  - 请求参数：如果是get请求直接拼接到请求路径，如果是post请求写到send方法
- setRequestHeader(请求头)
  - 设置请求头

AJAX的使用

开发步骤
- ①创建XMLHttpRequest对象
- ②设置监听XMLHttpRequest对象状态改变
- ③打开连接
- ④发送参数
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX的使用</title>
</head>
<body>
<div id="app">
    <input type="text" id="username" @change="checkUsername()" v-model="username"><span  v-html="errorMsg"></span>
</div>

</body>
<script src="/web14/js/vue.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            username: "",
            errorMsg: ""
        },
        methods: {
            checkUsername() {
                var _this = this;
                console.log(this.username);
                //①创建XMLHttpRequest对象
                XMLHttpRequest
                xhr = new XMLHttpRequest();
                //②设置监听XMLHttpRequest对象状态改变
                xhr.onreadystatechange = function () {
                    if (xhr.status == 200 && xhr.readyState == 4) {
                        //获取响应正文
                        var jsonStr = xhr.responseText;
                        console.log(jsonStr);
                        //将jsonStr -> js对象
                        var jsObj = JSON.parse(jsonStr);
                        if (jsObj.flag) {
                            //账户可以使用!
                            _this.errorMsg = "<font color='blue'>"+jsObj.msg+"</font>"
                        } else {
                            //账户已经存在!
                            _this.errorMsg = "<font color='red'>"+jsObj.msg+"</font>"
                        }
                    }
                }
                //③打开连接
                xhr.open("get", "/web14/demo01?username=" + this.username, true);
                //④发送参数
                xhr.send();
            }
        }
    })

</script>
</html>

@WebServlet("/demo01")
public class Demo01Servlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        ResultVO resultVO = null;
        if ("root".equals(username) || "oldqiu".equals(username)) {
            //账户已存在
            resultVO = new ResultVO(false, "账户已经存在!", null);
        } else {
            //账户不存在
            resultVO = new ResultVO(true, "账户可以使用!", null);
        }

        //将resultVO转换为json字符串
        String jsonStr = JSONUtils.javaBean2JsonStr(resultVO);
        //将jsonStr作为响应正文返回给浏览器
        resp.setContentType("application/json;charset=utf-8");
        resp.getWriter().write(jsonStr);
    }

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

Axios介绍

概述
- 使用原生的JavaScript程序执行Ajax极其繁琐，所以一定要使用框架来完成。而Axios就是目前最流行的前端Ajax框架。
官网
- [axios中文文档|axios中文网 | axios (axios-js.com)](

axios发送普通参数

概述
- 请求参数拼接到url后面。
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios发送普通参数</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="username"><br>
    <button @click="fn1()">发送普通参数</button>
    <button @click="fn2()">发送普通参数2</button>
    <button @click="fn3()">发送普通参数3</button>
</div>
</body>
<script src="/web14/js/vue.js"></script>
<script src="/web14/js/axios.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            username: ""
        },
        methods: {
            fn1() {
                var _this = this;
                axios({
                    method: "get",
                    url: "/web14/demo02",
                    params: {
                        username: _this.username
                    }
                }).then(function (res) {
                    //获取响应正文
                    var data = res.data;
                    console.log(data);
                }).catch(function (res) {
                    var data = res.data;
                    console.log(data)
                });
            },
            fn2() {
                var _this = this;
                axios({
                    method: "get",
                    url: "/web14/demo02?username=" + _this.username,
                }).then(function (res) {
                    //获取响应正文
                    var data = res.data;
                    console.log(data);
                }).catch(function (res) {
                    var data = res.data;
                    console.log(data)
                });
            },
            fn3() {
                var _this = this;
                axios.get('/web14/demo02', {
                    params: {
                        username: _this.username
                    }
                }).then(function (res) {
                    console.log(res.data);
                }).catch(function (error) {
                    console.log(error);
                });
            }
        }
    })

</script>
</html>

axios发送请求正文

概述
- 请求参数在请求正文。
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios发送请求头json</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="username"><br>
    <button @click="fn1()">axios发送请求头json</button>

</div>
</body>
<script src="/web14/js/vue.js"></script>
<script src="/web14/js/axios.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            username: ""
        },
        methods: {
            fn1() {
                var _this = this;
                axios({
                    method: "post",
                    url: "/web14/demo03",
                    data: {
                        username: _this.username
                    }
                }).then(function (res) {
                    console.log(res.data);
                }).catch(function (res) {
                    console.log(res);
                })
            }

        }
    })

</script>
</html>

@WebServlet("/demo03")
public class Demo03Servlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //考虑使用请求正文，数据量可能比较大，所以，使用流的方式来读取。
        //获取的应该是一个和HttpServletRequest对象相关的输入流，用来读取HttpServletRequest对象中的请求正文（json字符串）
        BufferedReader bufferedReader = req.getReader();
        String content = null;
        StringBuilder sb = new StringBuilder();
        while ((content = bufferedReader.readLine()) != null) {
            sb.append(content);
        }
        String inputJsonStr = sb.toString();
        System.out.println("jsonStr = " + inputJsonStr);
        Map map = JSONUtils.jsonStr2Javabean(inputJsonStr, Map.class);
        String username = (String) map.get("username");
        ResultVO resultVO = null;
        if ("root".equals(username) || "oldqiu".equals(username)) {
            //账户已存在
            resultVO = new ResultVO(false, "账户已经存在!", null);
        } else {
            //账户不存在
            resultVO = new ResultVO(true, "账户可以使用!", null);
        }

        //将resultVO转换为json字符串
        String jsonStr = JSONUtils.javaBean2JsonStr(resultVO);
        //将jsonStr作为响应正文返回给浏览器
        resp.setContentType("application/json;charset=utf-8");
        resp.getWriter().write(jsonStr);
    }

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

JSONUtills工具类优化

现有JSONUtils
- ①将java对象转换为json字符串
- ②将json字符串转换为java对象
未来JSONUtils
- ①将java对象转换为json字符串
- ②将json字符串转换为java对象
- ③获取请求正文json，再将json字符串转换为java对象
- ④将java对象转换为json字符串，再将json字符串作为响应正文返回给浏览器
代码实现

public class JSONUtils {


    /**
     * 将java对象转换为json字符串
     *
     * @param object
     * @return
     * @throws JsonProcessingException
     */
    public static String javaBean2JsonStr(Object object) throws JsonProcessingException {
        return new ObjectMapper().writeValueAsString(object);
    }


    /**
     * ②将json字符串转换为java对象
     *
     * @param jsonStr
     * @param clazz
     * @param <T>
     * @return
     * @throws IOException
     */
    public static <T> T jsonStr2Javabean(String jsonStr, Class<T> clazz) throws IOException {
        return new ObjectMapper().readValue(jsonStr, clazz);
    }


    /**
     * 1，获取请求正文json
     * 2,将json字符串转换为java对象
     *
     * @param <T>
     * @return
     */
    public static <T> T readRequest2Javabean(HttpServletRequest request, Class<T> clazz) throws Exception {
        //1.1，获取请求正文json
        BufferedReader bufferedReader = request.getReader();
        String content = null;
        StringBuilder sb = new StringBuilder();
        while ((content = bufferedReader.readLine()) != null) {
            sb.append(content);
        }
        String inputJsonStr = sb.toString();
        //1.2,将json字符串转换为java对象
        T t = JSONUtils.jsonStr2Javabean(inputJsonStr, clazz);
        return t;
    }


    /**
     * 1，将java对象转换为json字符串
     * 2，将json字符串作为响应正文返回给浏览器
     * @param response
     * @param obj
     */
    public static void writeJavabean2ResponseText(HttpServletResponse response, Object obj) throws IOException {
        String jsonStr = JSONUtils.javaBean2JsonStr(obj);
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(jsonStr);
    }


}

@WebServlet("/demo04")
public class Demo04Servlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.1，获取请求正文json
        try {
            Map map = JSONUtils.readRequest2Javabean(req, Map.class);

            //业务处理
            String username = (String) map.get("username");
            ResultVO resultVO = null;
            if ("root".equals(username) || "oldqiu".equals(username)) {
                resultVO = new ResultVO(false, "账户已经存在!", null);
            } else {
                resultVO = new ResultVO(true, "账户可以使用!", null);
            }

            JSONUtils.writeJavabean2ResponseText(resp, resultVO);

        } catch (Exception e) {
            e.printStackTrace();
        }


    }

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

axios练习

需求
- 输入框输入员工编号，后台根据相应员工编号以json字符串形式返回响应员工信息给浏览器
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios练习</title>
</head>
<body>
<div id="app">
员工编号：<input type="text" v-model="id"><br>
        <button @click="selectEmplyee()">查询</button><br>
查询结果如下：<br>
    <div v-if="!flag">查无此人！</div>
    <div v-if="flag">
        编号：<span v-text="employee.employeeId"></span><br>
        姓名：<span v-text="employee.employeeName"></span><br>
        年龄：<span v-text="employee.age"></span><br>
        薪资：<span v-text="employee.salary"></span><br>
    </div>
</div>
<script src="/web14/js/vue.js"></script>
<script src="/web14/js/axios.js"></script>
<script>
    var vue = new Vue({
         el: "#app",
        data:{
            id:"",
            flag:true,
            employee:{}
        },
        methods:{
            /**
             * 根据id查询员工信息
             */
            selectEmplyee(){
                var _this= this;
                axios({
                    method:"get",
                    url:"/web14/demo05",
                    params:{
                        id:_this.id
                    }
                }).then(function (response) {
                    var data = response.data;
                    //data是js对象
                    console.log(data);
                    var employee = data.data;
                    _this.flag=data.flag;
                    _this.employee=employee;
                })
            }
        }
    });

</script>
</body>
</html>

package com.atguigu.controll; /**
 * @description
 * @atuthor ${Mr.W}
 * @create 2021/12/16  11:17
 */

import com.atguigu.pojo.Employee;
import com.atguigu.pojo.ResultVo;
import com.atguigu.util.JSONUtils;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet( "/demo05")
public class Demo05Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String id = request.getParameter("id");
        Employee employee=null;
        ResultVo resultVo=null;
        if (id.equals("1")||id.equals("2")||id.equals("3")){
        employee=new Employee(Integer.parseInt(id),
                "张三"+id,
                18+Integer.parseInt(id),
                20000.0+Integer.parseInt(id)*1000);
            resultVo = new ResultVo(true,"查询员工成功！",employee);
        }else {
            //查无此人
            resultVo = new ResultVo(false,"没有该员工！",employee);

        }
        JSONUtils.writeJavabean2ResponseText(response,resultVo);
    }

    @Override
    protected long getLastModified(HttpServletRequest req) {
        return super.getLastModified(req);
    }

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

package com.atguigu.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * @description
 * @atuthor ${Mr.W}
 * @create 2021/12/16  11:28
 */
@NoArgsConstructor
@AllArgsConstructor
@Data
public class Employee {
    private Integer employeeId;
    private String employeeName;
    private Integer age;
    private Double salary;
}