Day60.Ajax、Axios、Json格式转换、书城第五阶段: 结果模型、Ajax局部更新、购物车

焰火青年·

已于 2022-07-16 20:49:57 修改

阅读量651

点赞数 1

分类专栏： Web 文章标签： ajax web javaee

于 2022-05-14 00:20:40 首次发布

本文链接：https://blog.csdn.net/a111042555/article/details/124741926

版权

Web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、Ajax概述

二、Axios框架 (封装Ajax)

1. Axios基本用法

2. 客户端发送 json 类型数据(data)

3. 服务端返回 json 类型数据 (箭头函数 =>)

a. 接收json对象

b. 接收Json数组

4. gson、jackson 工具类 (json数据与java对象的转换)

封装 JSONUtils

三、书城项目第五阶段

1. 封装CommonResult (ajax结果模型)

2. 注册页面：用户名唯一性检查优化 — Ajax局部更新

一、Ajax概述

Ajax：(Asynchronous Javascript And XML)（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术，Ajax 请求的局部更新，不刷新浏览器窗口，不做页面跳转，不会舍弃原来页面的内容。

前后端分离：前端后端分开服务器部署，数据传递采用json格式传递。在我们这里我们先理解为彻底舍弃服务器端渲染，数据全部通过Ajax方式以JSON格式来传递

JSON (JavaScript Object Notation, JS 对象简谱)，一种用于跨平台传输的数据格式。
Day52.JavaScript、对象|数组、JSON、DOM操作、正则RegExp_焰火青年·的博客-CSDN博客

服务器渲染：

Ajax渲染：

同步：多个操作按顺序执行，前面的操作没有完成，后面的操作就必须等待。所以同步操作通常是串行的。

异步：多个操作相继开始并发执行，在各自在自己独立的进程或线程中完成，所以互不干扰，谁也不用等谁。

二、Axios框架 (封装Ajax)

使用原生的JavaScript程序执行Ajax极其繁琐，所以一定要使用框架来完成。而Axios就是目前最流行的前端Ajax框架。(大自然的搬运工，对Ajax进行封装)

Axios官网：axios中文网|axios API 中文文档 | axios

axios程序接收到的响应对象结构：

属性名	作用
config	调用axios(config对象)方法时传入的JSON对象
data	服务器端返回的响应体数据
headers	响应消息头
request	原生JavaScript执行Ajax操作时使用的XMLHttpRequest
status	响应状态码
statusText	响应状态码的说明文本

1. Axios基本用法

1.在前端页面引入开发环境

<script type="text/javascript" src="/demo/static/vue.js"></script>
<script type="text/javascript" src="/demo/static/axios.min.js"></script>

2.发送普通请求参数

html
<div id="box">
    <div style="height: 200px;width: 400px;border: 1px solid red" >
        <!--v-text无法解析标签，v-html可以解析-->
        <span v-text="msg"></span>
        <span v-html="msg"></span>

    </div>
    <button @click="sendAjax()">发起异步请求</button>
</div>

var vue = new Vue({
    "el":"#box",
    "data":{
        "msg":"",
    },
    "methods":{
        sendAjax(){
            //使用axios发送异步请求
            axios({
                "method":"post",    //请求方式(不写默认get)
                "url":"demo01",     //请求的地址
                "params":{          //发送的请求参数
                    "userName":"tom",
                    "userPwd":"123456"
                }            //response是服务器端的响应数据，是json类型的
            }).then(function (response) {    //请求成功会执行的函数
                    //alert("Ajax请求成功");
                    console.log(response);
                    console.log(response.data);      //响应体
                    console.log(response.headers);   //成功的响应头
                    console.log(response.status);    //成功的状态码
                
                    vue.msg = response.data; //将响应的消息渲染到页面上

            }).catch(error => {        //可以使用箭头函数简化回调函数
                    //alert("Ajax请求失败")
                    
                    console.log(error);    //获取失败信息
                    
                    console.log(error.response);    //失败的响应信息
                    console.log(error.response.data);   //失败的数据(其实是一个页面)
                    console.log(error.response.headers);//失败的响应头
                    console.log(error.response.status); //失败的状态码
            })
        }
    }
})
</script>

2. 客户端发送 json 类型数据(data)

在使用Axios传递数据时，无论是get还是post，数据都在地址栏后拼接。

如何解决安全问题？
使用 json类型传输数据。(data 传递json数据，param 传递普通参数)。

注意：客户端发送json类型数据，必须采用post请求传递 (get请求只能提交字符串数据)。

<body>
<!--客户端发送请求携带Json类型数据-->
<div id="box">
    <button @click="sendJson()">发送Json数据</button>
</div>
<script>
    new Vue({
        "el":"#box",
        "data":{},
        "methods":{
            "sendJson": function (){
                axios({
                    "method":"post",
                    "url":"ajax3",
                    "data":{    //data: 发送json数据，param: 发送请求参数
                        "username":"zhangsan",
                        "password":"123"
                    }
                }).then( new function (){
                    alert("发送！")
                }).catch();
            }
        }
    })
</script>
</body>

服务端解析：

服务端不能采用 getParameterMap() 方式获取 Json 数据；

应采用流的方式 BufferdReader br = req.getReader() 获取 json 数据。


@WebServlet("/ajax3")   //采用注解的方式地址匹配
public class Ajax03Servlet extends HttpServlet {
    //service，内部会判断请求方式
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("------ Ajax03Servlet ------");
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        //Parameter()无法接收Json数据
        /*Map<String, String[]> map = req.getParameterMap();
        map.forEach(System.out::printf);*/

        //1.通过获取io流，接收Json数据
        BufferedReader br = req.getReader();

        //2.读取数据，拼接到一起
        StringBuilder sb = new StringBuilder();
        String line = "";
        while ((line = br.readLine())!=null){
            sb.append(line);
        }
        System.out.println(sb);

        //3.通过工具类Gson，将json格式字符串转换为 Java对象
        Gson gson = new Gson();
        User user = gson.fromJson(sb.toString(), User.class);

        System.out.println(user);
    }
}

3. 服务端返回 json 类型数据 (箭头函数 =>)

a. 接收json对象

服务端发送：

@WebServlet("/ajax4")
public class Ajax04Servlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("------ Ajax04Servlet ------");
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");

        //1.调用gson工具将对象转换为json字符串
        User zs = new User("张三", "123456");
        Gson gson = new Gson();
        String json = gson.toJson(zs);

        //2.获取打印流响应到客户端
        PrintWriter writer = resp.getWriter();
        writer.println(json);
    }
}

客户端接收：

可以使用箭头函数 => 简化回调函数，箭头函数内可以用 this 表示 Vue 对象 (因为特性，不存在函数) (类似Lamda表达式)。

<body>
<!--客户端获取响应接收Json类型数据，通过vue渲染到表格-->
<div id="box">
    <table width="400px" border="1" style="text-align: center">
        <tr>
            <th>姓名</th>
            <th>密码</th>
        </tr>
        <!--接收的json对象渲染到表格中-->
        <tr>
            <td>{{user.username}}</td>
            <td>{{user.password}}</td>
        </tr>
    </table>
    <button @click="acceptJson()">接收Json数据</button>
</div>
<script>
    new Vue({
        "el":"#box",
        "data":{
            "user":{
                /*"username":"",
                "password":"",可省略，js可以动态添加、删除属性*/
            }
        },
        "methods":{
            "acceptJson": function (){
                axios({
                    "method":"post",
                    "url":"ajax4",
                }).then( value =>{  //箭头函数简化书写，可以以this代表vue
                    alert("接收")
                    //接收json数据，通过vue渲染
                    console.log(value.data);
                    this.user = value.data;
                }).catch(reason => {
                    console.log("请求失败");
                });
            }
        }
    })
</script>
</body>

b. 接收Json数组

客户端接收：

<body>
<!--客户端获取响应接收Json类型数组，通过vue渲染到表格-->
<div id="box">
    <table width="400px" border="1" style="text-align: center">
        <tr>
            <th>姓名</th>
            <th>密码</th>
        </tr>
        <tr v-for="u in users"> <!--vue遍历-->
            <td>{{u.username}}</td>
            <td>{{u.password}}</td>
        </tr>
    </table>
    <button @click="acceptJson()">接收Json数组</button>
</div>
<script>
    new Vue({
        "el":"#box",
        "data":{
            "users":[],//user数组
        },
        "methods":{
            "acceptJson": function (){
                axios({
                    "method":"post",
                    "url":"ajax5",
                }).then( value =>{
                    alert("接收")
                    //接收json数据数组，通过vue渲染
                    console.log(value.data);
                    this.users = value.data;
                }).catch(reason => {
                    console.log("请求失败");
                });
            }
        }
    })
</script>
</body>

服务端发送：

@WebServlet("/ajax5")
public class Ajax05Servlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("------ Ajax05Servlet ------");
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        //封装user集合
        User us1 = new User("张三", "123456");
        User us2 = new User("李四", "123456");
        User us3 = new User("王五", "123456");
        User us4 = new User("赵六", "123456");
        ArrayList<User> userList = new ArrayList<>();
        Collections.addAll(userList,us1,us2,us3,us4);

        //1.调用gson工具将user集合转换为json字符串
        Gson gson = new Gson();
        String listJson = gson.toJson(userList);

        //2.获取打印流打印到客户端
        PrintWriter writer = resp.getWriter();
        writer.println(listJson);
    }
}

4. gson、jackson 工具类 (json数据与java对象的转换)

Gson 是Google研发的一款非常优秀的JSON数据解析和生成工具，它可以帮助我们将数据在JSON字符串和Java对象之间互相转换。 new Gson()

jackson 是Java中比较常用的JSON解析的工具包，SpringMVC和SpringBoot中默认支持的就是jackson。 new ObjectMapper();

jackson：

public class JackSonTest {
    //jackSon
    ObjectMapper objectMapper = new ObjectMapper();

    //1.Java对象 转为 json格式字符串
    @Test
    public void test01() throws JsonProcessingException {
        User user = new User("李白", "123456");
        //转换
        String json = objectMapper.writeValueAsString(user);

        System.out.println("json = " + json);//{"username":"李白","password":"123456"}
    }

    //2.json格式字符串 转为 Java对象
    @Test
    public void test02() throws IOException {
        String json = "{\"username\":\"李白\",\"password\":\"123456\"}";
        //转换
        User user = objectMapper.readValue(json, User.class);

        System.out.println("user = " + user);//user = User{username='李白', password='123456'}
    }

    //3.Java集合 转为 Json格式数组字符串
    @Test
    public void test03() throws IOException {
        User user1 = new User("李白", "123456");
        User user2 = new User("杜甫", "123456");
        List<User> list = new ArrayList<>();
        list.add(user2);
        list.add(user1);
        //转换
        String json = objectMapper.writeValueAsString(list);

        System.out.println("json = " + json);//[{"username":"杜甫","password":"123456"},{"username":"李白","password":"123456"}]
    }

    //4. Json格式数组字符串 转为 Java集合
    @Test
    public void test04() throws IOException {
        String json ="[{\"username\":\"杜甫\",\"password\":\"123456\"},{\"username\":\"李白\",\"password\":\"123456\"}]";

        TypeReference<List<User>> typeReference = new TypeReference<List<User>>() {};
        //转换
        List<User> list = objectMapper.readValue(json, typeReference);

        list.forEach(System.out::println);
    }

Gson：

public class GsonTest {
    //gson工具类 Java对象与json数据字符串转换
    Gson gson = new Gson();
    //1.Java对象 转为 json格式字符串
    @Test
    public void test01(){
        User user = new User("李白", "杜甫");
        //转换
        String json = gson.toJson(user);

        System.out.println("json = " + json);   //{"username":"李白","password":"杜甫"}
    }
    @Test
    //2.json格式字符串 转为 Java对象
    public void test02(){
        String json = "{\"username\":\"李白\",\"password\":\"杜甫\"}";
        //转换
        User user = gson.fromJson(json, User.class);

        System.out.println("user = " + user);//User{username='李白', password='杜甫'}

    }
    //3, Java集合 转为 Json格式数组字符串
    @Test
    public void test03(){
        User user1 = new User("李白", "杜甫");
        User user2 = new User("李白", "杜甫");
        ArrayList<User> list = new ArrayList<>();
        Collections.addAll(list, user1,user2);
        //转换
        String json = gson.toJson(list);

        System.out.println("json = " + json);//[{"username":"李白","password":"杜甫"},{"username":"李白","password":"杜甫"}]
    }
    //4. Json格式数组字符串 转为 Java集合
    @Test
    public void test04(){
        String json = "[{\"username\":\"李白\",\"password\":\"123456\"},{\"username\":\"杜甫\",\"password\":\"123456\"}]";
        //生成的对象类型
        Type type = new TypeToken<List<User>>() {}.getType();

        List<User> o = gson.fromJson(json, type);
        o.forEach(System.out::println);
    }
}

封装 JSONUtils

将重复内容进行封装：JSON工具类，用于获取json格式的请求参数以及向客户端响应json字符串。

public class JSONUtils {
    /**
     * 通用的将 json数据从请求中获取并封装为对象
     * @param req 请求
     * @param clazz 转为对象的Class类型
     * @return
     */
    //将json数据从请求中获取并封装为对象
    public static <T> T parseJsonStr(HttpServletRequest req,Class<T> clazz){
        //java8新特性 自动关闭流    获取输入流
        try (BufferedReader reader = req.getReader()){
            //准备拼接字符串
            StringBuilder sbl = new StringBuilder();
            String line = "";
            while ((line = reader.readLine())!=null){
                sbl.append(line);
            }
            //jackson工具类 将Json数据字符串转换为Java对象
            ObjectMapper mapper = new ObjectMapper();
            T t = mapper.readValue(sbl.toString(), clazz);

            return t;
        } catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException(e.getMessage());
        }
    }
    /**
     * 将对象转为json写出的方法
     * @param response 响应对象
     * @param obj 要写出的对象
     */
    public static void writeJson(HttpServletResponse response, Object obj){
        try {
            //jackson工具类 将Java对象转换为Json数据字符串
            ObjectMapper objectMapper = new ObjectMapper();

            String json = objectMapper.writeValueAsString(obj);

            response.getWriter().println(json);
        } catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException(e.getMessage());
        }
    }
}

三、书城项目第五阶段

由于后期有很多配置文件，建立资源文件夹方便管理，等同于放在src目录下。

1. 封装CommonResult (ajax结果模型)

在整个项目中，凡是涉及到给Ajax请求返回响应，我们都封装到CommonResult类型中。

属性名	含义
flag	服务器端处理请求的结果，取值为true或者false
message	服务器端处理请求失败之后，要响应给客户端的数据
resultData	服务器端处理请求成功之后，需要响应给客户端的数据

作为整个团队开发过程中，前后端交互时使用的统一的数据格式，有利于团队成员之间的协助，提高开发效率。

代码实现：

//ajax 结果模型
public class CommonResult {

    private boolean flag;      //请求(业务)成功还是失败
    private Object resultData; //请求成功时响应的数据 (主要针对查询)
    private String massage;    //失败时响应的错误信息

    //业务成功
    public static CommonResult ok(){
        return new CommonResult().setFlag(true);
    }

    //业务成功，返回数据
    public static CommonResult ok(Object data){
        return new CommonResult().setFlag(true).setResultData(data);
    }

    //业务失败
    public static CommonResult error(){
        return new CommonResult().setFlag(false);
    }
    //业务失败，返回失败原因
    public static CommonResult error(String message){
        return new CommonResult().setFlag(false).setMassage(message);
    }

由于在setFlag() 等操作中返回值为null，并不会返回CommonResult对象，所以在生成get()、set() 方法时我们选择：

    public boolean isFlag() {
        return flag;
    }
    public CommonResult setFlag(boolean flag) {
        this.flag = flag;
        return this;    //会返回当前this对象
    }
    public Object getResultData() {
        return resultData;
    }
    public CommonResult setResultData(Object resultData) {
        this.resultData = resultData;
        return this;
    }