AJAX & Axios & JSON （外加JSON数据格式案例）

待我称王封你为后i 2023-09-28 12:40 26阅读 0赞

![2790e2996ba94867b3ec7b68bb0c00c7.png][]

![3d562b7ece88461eb9c6d8db624328a2.png][]

同步和异步：

![ca50745ee805444792ba52bb9cf4ee58.png][]

## 一、Ajax 快速入门 ##

![741724acc375431f9baf442364fcec50.png][]

![98f9aa58c5a54475bb7742f4cccf5457.png][]

代码演示如下：

服务端：AjaxServlet：

客户端：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    
    <script>
        // 1. 创建核心对象
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 2. 发送请求
        xhttp.open("GET", "http://localhost:8090/ajax-demo/ajaxServlet"); // 注意：这个地址是总地址（开启服务器后访问的总路径URL）
        xhttp.send();
        // 3. 获取服务端的响应数据
    
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                        alert(this.responseText);   // this.responseText 就是响应的服务端返回的数据
                }
            }
    </script>
    
    
    </body>
    </html>

注意细节：

1、发送请求的地址要是总的URL地址

2、默认为true 异步

3、客户端的三个步骤可以在 网站获取（直接复制代码即可）[w3school 在线教程全球最大的中文 Web 技术教程。![logo-16-red.png][]https://www.w3school.com.cn/][w3school _ Web _logo-16-red.png_https_www.w3school.com.cn]

开启服务器访问客户端演示结果：

![e02e2d59fede4491995f2a0a4cd8f18e.png][] ![fa3181888647403b84c5b8ccab9a805e.png][]

## 二、例子演示 ##

![a04becf5ef83432e8298f40d56ab5bd5.png][]

代码演示如下：

服务端：SelectUserServlet

package com.itheima.web.servlet;
    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;
    
    @WebServlet("/selectUserServlet")
    public class SelectUserServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
            // 1 接收用户名参数
            String username =request.getParameter("username");
    
            // 2 调用service查询User对象
            // （我们这里定义一个变量为true假设查询的User用户名是存在的）
            boolean flag =true;
    
            // 3 响应给前端标记（假设我们这里响应 “true”）
            response.getWriter().write("" + flag);  // 这里其实响应的是字符串型的true  （因为空串 + 字符型true）
    
        }
    
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doGet(request, response);
        }
    }

客户端（前端）：register.html

注意1：重点代码在ajax请求部分（要看的懂）

注意2：要在<script>标签里面写ajax或者axios请求或者获取的响应结果

<!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/html"><head>
        <meta charset="UTF-8">
        <title>欢迎注册</title>
        <link href="css/register.css" rel="stylesheet">
    </head>
    <body>
    
    <div class="form-div">
        <div class="reg-content">
            <h1>欢迎注册</h1>
            <span>已有帐号？</span> <a href="login.jsp">登录</a>
        </div>
        <form id="reg-form" action="#" method="get">
    
            <table>
    
                <tbody><tr>
                    <td>用户名</td>
                    <td class="inputs">
                        <input name="username" type="text" id="username">
                        <br>
                        <span id="username_err" class="err_msg" style="display: none">用户名已存在</span>
                    </td>
    
                </tr>
    
                <tr>
                    <td>密码</td>
                    <td class="inputs">
                        <input name="password" type="password" id="password">
                        <br>
                        <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                    </td>
                </tr>
    
    
    
                </tbody></table>
    
            <div class="buttons">
                <input value="注 册" type="submit" id="reg_btn">
            </div>
            <br class="clear">
        </form>
    
    </div>
    
    
    <script>    // 注意要在script里面写ajax或者axios请求
    
        // 1 给用户名输入框绑定 失去焦点事件
        document.getElementById("username").onblur =function (){
            // 2 发送Ajax请求
    
            // 获取用户名的值（客户端输入的用户名传给服务端的用户名的值）
            var username =this.value;
    
            //  2.1 创建核心对象
            var xhttp;
            if (window.XMLHttpRequest) {
                xhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
    
            //  2.2 发送请求
            xhttp.open("GET", "http://localhost:8090/ajax-demo/selectUserServlet?username="+username); // 注意：这个地址是总地址（开启服务器后访问的总路径URL）
            xhttp.send();
    
            //  2.3 获取服务端的响应数据
    
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    // alert(this.responseText);   // this.responseText 就是响应的服务端返回的数据
    
                    // 这里我们不用弹窗的形式获取服务端的响应数据
                    if (this.responseText == "true"){
                        // 判断如果我们接收的服务端响应的数据为true，说明用户存在 那么我们就提示信息 （提示信息是：用户名已存在）
                        document.getElementById("username_err").style.display ='';  // 把 display变成空串就能显示信息了
                    }else {
                        // 说明用户名不存在 那么我们就不把提示信息展示给用户了
                        document.getElementById("username_err").style.display ='none';
                    }
                }
            }
        }
    
    
    </script>
    
    
    </body>
    </html>

开启服务器后访问客户端（前端）：

![f03f07314d8e45cab288d8816921139e.png][]

## 三、Axios ##

作用：Axios 是 Ajax的代码简写

细节：用Axios请求 增删改用post请求格式 查询用get请求格式

### 3.1、Axios快速入门： ###

![6d8355de3f724b4cbeb6857a3a986c61.png][]

代码演示如下：

服务端：AxiosServlet

package com.itheima.web.servlet;
    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;
    
    @WebServlet("/axiosServlet")
    public class AxiosServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
            System.out.println("这是前端以get请求方式请求服务端的....");
    
            // 1. 接收前端的请求参数
            String username =request.getParameter("username");
            System.out.println(username);
    
            // 2. 响应给客户端数据
            response.getWriter().write("hello axios~");
        }
    
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
            System.out.println("这是前端以post请求方式请求服务端的....");
            this.doGet(request, response);
        }
    }

前端：02-axios-demo.html

![50fa9b04ade349fdb30896325d17f30a.png][]

开启服务器访问前端页面结果演示：（post请求方式不再演示）

![bd2d3fc528034fb1898f24db56efc5ab.png][]

![9aa04768c62941479338b0edd28395eb.png][]

### 3.2、Axios请求方式别名： ###

![c6530e0cedb3425ea0dcf7df57db756c.png][]

代码演示如下 （以post方式演示）：

前端：03-axios-demo2.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    
    
    <body>
    
    
    
    <script src="js/axios-0.18.0.js"></script> 
    
    
    <script>
    
            // post形式
            /*
    
            axios({
                method:"post",
                url:"http://localhost:8090/ajax-demo/axiosServlet",
                data:"username=kitty"
            }).then(function (resp){
                alert(resp.data);   // 通过data这个属性就能获取到服务端响应的数据 （hello axios~）
            })
    
            */
    
            // Axios别名的方式 post请求
           axios.post("http://localhost:8090/ajax-demo/axiosServlet","username=kitty")
            .then(function (resp){
                    alert(resp.data)
            });
    
    
    </script>
    
    </body>
    </html>

开启服务器访问前端所演示的结果和上面的结果一样：（前端拿到了服务端响应的数据）

![300f3096975a4f6294727b8d1386ce7b.png][]

##  ##

## 四、JSON ##

## ![feb87a12c99c4d6790ffbd8f375b0f23.png][] ##

### 4.1、JSON 基础语法 ###

作用：JSON语法多用于前端和后端之间的交互问题（前端基本上是以JSON数据格式请求后端的 ，那么后端就需要进行数据格式的转换，转换成Java数据）

![225a178ec684437cbb01bc2f151bf49c.png][]

代码演示如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    
    
    
    
    <body>
    
    <script>
    
        // 定义json
        var json ={
            "name":"kitty",
            "age":"20",    
            "addr":["上海","北京","郑州"] // 注意：最后一个结尾不用加符号
        }
    
        // 获取值
        alert(json.addr)
    
    
    
    </script>
    
    
    </body>
    
    
    </html>

![b0d523987b01425ca491b78ac90ad0b3.png][]

![35010b2f0c714403a7e340465c965d9b.png][]

### 4.2、JSON 数据和java对象转换（重点） ###

1、解决响应时展示给前端页面中文乱码问题 （看response笔记 把html改成json即可

response.setContentType("text/json;charset=utf-8");

![6b8c9e2cef9f4adc895eb435ba1d1517.png][]

使用步骤：

![9c0398a17c10426bab71d096c41a6891.png][]

下面模拟前端和后端交互：

代码演示如下：

User类：

package com.itheima.json;
    
    public class User {
    
        private String username;
        private String password;
        private String addr;
    
        // getter and setter
    
        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 String getAddr() {
            return addr;
        }
    
        public void setAddr(String addr) {
            this.addr = addr;
        }
    
        // toString方法
    
        @Override
        public String toString() {
            return "User{" +
                    "用户名='" + username + '\'' +
                    ", 密码='" + password + '\'' +
                    ", 地址='" + addr + '\'' +
                    '}';
        }
    }

测试类：FactJsonTest

细节：Java数据转换成的JSON数据 最终的JSON数据是以数组的形式存在的

package com.itheima.json;
    import com.alibaba.fastjson.JSON;
    
    
    public class FactJsonTest {
    
        public static void main(String[] args) {
    
            // 1. 模拟将Java对象转成JSON字符串
    
            // 假设我们服务端将逻辑代码封装成User对象属性中转成JSON 响应给前端JSON数据
            User user =new User();
            user.setUsername("kitty1");
            user.setPassword("1");
            user.setAddr("郑州");
    
            // 将Java对象转成JSON字符串
            String jsonString =JSON.toJSONString(user);
            System.out.println(jsonString); // {"addr":"郑州","password":"1","username":"kitty1"}
    
    
            // 2. 模拟将JSON字符串转成Java对象
    
            // 也就是说：前端请求的数据是JSON形式，我们后端要先把JSON数据转换成Java对象 然后我们后端才能做各种处理逻辑
            // 假设前端请求的数据字符串：{"addr":"郑州","password":"1","username":"kitty1"}
            User u =JSON.parseObject("{\"addr\":\"郑州\",\"password\":\"1\",\"username\":\"kitty1\"}",User.class); // User.class ：转换成User类型的类
            System.out.println(u);  // 打印的是User类中的toString方法 （没有toString方法打印则为对象内存地址）
    
    
        }
    }

FactJsonTest测试类输出结果：

![32f359ef58c447b69e4f5aafc214d9ac.png][]

## 五、例子 前后端以JAVA数据和JSON数据相互转换的例子 （查询所有 & 新增品牌） ##

**前期准备：**

![8ecd3bc99f684eea88cc57a7426d51fc.png][]

## 思路总体如下以brandName数据为例演示如下： ##

**要求1：前端以JSON数据形式请求后端路径资源，后端需要做的逻辑思路如下：**

以brandName数据为例演示如下：

前端代码：（只需要看懂axios部分即可）

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>添加品牌</title>
    </head>
    <body>
    <h3>添加品牌</h3>
    <form action="" method="post">
        品牌名称：<input id="brandName" name="brandName"><br>
        企业名称：<input id="companyName" name="companyName"><br>
        排序：<input id="ordered" name="ordered"><br>
        描述信息：<textarea rows="5" cols="20" id="description" name="description"></textarea><br>
        状态：
        <input type="radio" name="status" value="0">禁用
        <input type="radio" name="status" value="1">启用<br>
    
        <input type="button" id="btn"  value="提交">
    </form>
    
    
    
    <script src="js/axios-0.18.0.js"></script>
    
    <script>
        //1. 给按钮绑定单击事件
        document.getElementById("btn").onclick = function () {
            // 将表单数据转为json
            var formData = {
                brandName:"",
                companyName:"",
                ordered:"",
                description:"",
                status:"",
            };
            // 获取表单数据
            let brandName = document.getElementById("brandName").value;
            // 设置数据
            formData.brandName = brandName;
    
            // 获取表单数据
            let companyName = document.getElementById("companyName").value;
            // 设置数据
            formData.companyName = companyName;
    
            // 获取表单数据
            let ordered = document.getElementById("ordered").value;
            // 设置数据
            formData.ordered = ordered;
    
            // 获取表单数据
            let description = document.getElementById("description").value;
            // 设置数据
            formData.description = description;
    
            let status = document.getElementsByName("status");
            for (let i = 0; i < status.length; i++) {
                if(status[i].checked){
                    //
                    formData.status = status[i].value ;
                }
            }
    
            console.log(formData);
            //2. 发送ajax请求
            axios({
                method:"post",
                url:"http://localhost:8080/brand-demo/addServlet",
                data:{"brandName":"Kitty"}   // 注意：这里我们是以JSON格式写的数据的（ request.getParameter 是接收不了JSON数据的 需要转换成Java数据 ）
            }).then(function (resp) {
                // 判断响应数据是否为 success
                if(resp.data == "success"){
                    location.href = "http://localhost:8080/brand-demo/brand.html";
                }
            })
        }
    
    
    
    </script>
    </body>
    </html>

前端细节：

![f366dd2c22c841c5b95297873faefe5d.png][]

点击提交事件后 F12 查看 请求体数据：（这个请求体数据以后无论有多长都只是一行，我们后端就需要先获取到该请求体的数据 该请求体数据是JSON数据格式 （因为前端是以JSON格式数据请求的，最终我们需要把JSON格式数据转换成Java格式数据 最后进行其他的逻辑操作 ））

![f70a0fb17fa843ff929b54ccd4517cf3.png][]

后端（服务器）：

小细节：服务器端需要先抓包获取到前端请求的JSON数据 然后把JSON数据转换成Java数据格式

最后进行种种的逻辑处理（如：添加商品、修改商品、删除商品等逻辑）

package com.itheima.web;
    import com.alibaba.fastjson.JSON;
    import com.itheima.pojo.Brand;
    import com.itheima.service.BrandService;
    import javax.servlet.*;
    import javax.servlet.http.*;
    import javax.servlet.annotation.*;
    import java.io.BufferedReader;
    import java.io.IOException;
    
    @WebServlet("/addServlet")
    public class AddServlet extends HttpServlet {
    
        // new BrandService对象
        private BrandService brandService = new BrandService();
    
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // 接收客户端传递过来添加的数据
            /**
             *  重点注意： request.getParameter 是接收不了JSON形式的数据的 （前端请求是以axios请求的 请求数据是JSON格式： data:"{brandName=kitty}"
             *                                                             如果写成data:"brandName=kitty" 就可以用request接收数据 ）
             *
             *  String brandName =request.getParameter("brandName");
             *  System.out.println(brandName);  // null
             *
             *  也就是说：客户端以JSON数据请求服务器 我们要把JSON数据转换成java数据使用
             *
             *  因此我们需要先获取请求体数据
             */
    
            // 1、获取请求体数据
            BufferedReader bufferedReader =request.getReader();
            // 读一行 （就读刚才那个F12抓包到的请求体数据：{brandName:"kitty"}）
            String params =bufferedReader.readLine();
            // System.out.println(params); // {"brandName":"Kitty"}    可以看出我们把前端以JSON格式请求的数据拿到手了 我们需要进行转换数据格式
    
            // 2、将JSON数据格式转换为java对象格式
            Brand brand =JSON.parseObject(params,Brand.class);
            System.out.println(brand);
    
    
        }
    
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doGet(request, response);
        }
    }

结果：

开启服务器：访问前端（结果应该是前端请求到服务端做出的一些操作）

![b9a491bc7a4445bfbc9c8edadead0cb4.png][]

![926c292056a1411697dc2d39f6b8e22a.png][]

## 查询所有&新增商品总代码 ##

注意：前端的东西 只需要看懂 axios即可

查询所有：

Brand.html：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <a href="addBrand.html"><input type="button" value="新增"></a><br>
    <hr>
    <table id="brandTable" border="1" cellspacing="0" width="100%">
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tr align="center">
            <td>1</td>
            <td>三只松鼠</td>
            <td>三只松鼠</td>
            <td>100</td>
            <td>三只松鼠，好吃不上火</td>
            <td>启用</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>
    
        <tr align="center">
            <td>2</td>
            <td>优衣库</td>
            <td>优衣库</td>
            <td>10</td>
            <td>优衣库，服适人生</td>
            <td>禁用</td>
    
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>
    
        <tr align="center">
            <td>3</td>
            <td>小米</td>
            <td>小米科技有限公司</td>
            <td>1000</td>
            <td>为发烧而生</td>
            <td>启用</td>
    
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>
    </table>
    
    
    
    
    <script src="js/axios-0.18.0.js"></script>
    
    <script>
        //1. 当页面加载完成后，发送ajax请求
        // 这个window.onload作用是：当这个brand.html整个页面加载完成后，就会自动触发这个事件
        window.onload = function () {
            //2. 发送ajax请求
            axios({
                method:"get",
                url:"http://localhost:8080/brand-demo/selectAllServlet"
            }).then(function (resp) {
                //获取数据
                let brands = resp.data;
                let tableData = " <tr>\n" +
                    "        <th>序号</th>\n" +
                    "        <th>品牌名称</th>\n" +
                    "        <th>企业名称</th>\n" +
                    "        <th>排序</th>\n" +
                    "        <th>品牌介绍</th>\n" +
                    "        <th>状态</th>\n" +
                    "        <th>操作</th>\n" +
                    "    </tr>";
    
                for (let i = 0; i < brands.length ; i++) {
                    let brand = brands[i];  // 获取到一个一个的转换成的JSON数据的数组（Brand对象最终转换成JSON形式的数据是以数组形式存在的）
                    // 如： {"addr":"郑州","password":"1","username":"kitty1"}
    
                    tableData += "\n" +
                        "    <tr align=\"center\">\n" +
                        "        <td>"+(i+1)+"</td>\n" +
                        "        <td>"+brand.brandName+"</td>\n" +
                        "        <td>"+brand.companyName+"</td>\n" +
                        "        <td>"+brand.ordered+"</td>\n" +
                        "        <td>"+brand.description+"</td>\n" +
                        "        <td>"+brand.status+"</td>\n" +
                        "\n" +
                        "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
                        "    </tr>";
                }
    
                // 设置表格数据
                document.getElementById("brandTable").innerHTML = tableData;
            })
        }
    
    
    
    </script>
    
    
    </body>
    </html>

后端代码：

selectAllServlet：（ 这里把java数据转换成json数据响应给前端 ）

开启服务器结果如下：

![ac20466f61af46499872f043844e62a4.png][]

增加商品：

前端： addBrand.html

注意这有一个小逻辑：最后前端收到后端的success的响应后，跳转到查询所有页面 把新添加进去的商品展示出来

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>添加品牌</title>
    </head>
    <body>
    <h3>添加品牌</h3>
    <form action="" method="post">
        品牌名称：<input id="brandName" name="brandName"><br>
        企业名称：<input id="companyName" name="companyName"><br>
        排序：<input id="ordered" name="ordered"><br>
        描述信息：<textarea rows="5" cols="20" id="description" name="description"></textarea><br>
        状态：
        <input type="radio" name="status" value="0">禁用
        <input type="radio" name="status" value="1">启用<br>
    
        <input type="button" id="btn"  value="提交">
    </form>
    
    
    
    <script src="js/axios-0.18.0.js"></script>
    
    <script>
        //1. 给按钮绑定单击事件
        document.getElementById("btn").onclick = function () {
    
            // 将表单数据转为JSON
            var formData = {
                brandName:"",
                companyName:"",
                ordered:"",
                description:"",
                status:"",
            };
            // 获取表单数据
            let brandName = document.getElementById("brandName").value;
            // 设置数据
            formData.brandName = brandName;
    
            // 获取表单数据
            let companyName = document.getElementById("companyName").value;
            // 设置数据
            formData.companyName = companyName;
    
            // 获取表单数据
            let ordered = document.getElementById("ordered").value;
            // 设置数据
            formData.ordered = ordered;
    
            // 获取表单数据
            let description = document.getElementById("description").value;
            // 设置数据
            formData.description = description;
    
            let status = document.getElementsByName("status");
            for (let i = 0; i < status.length; i++) {
                if(status[i].checked){
                    //
                    formData.status = status[i].value ;
                }
            }
    
            console.log(formData);
            //2. 发送ajax请求
            axios({
                method:"post",
                url:"http://localhost:8080/brand-demo/addServlet",
                data: formData  // 注意：这里我们是以JSON格式写的数据的（ request.getParameter 是接收不了JSON数据的 需要转换成Java数据 ）
            }).then(function (resp) {
                // 判断响应数据是否为 success
                if(resp.data == "success"){ // 如果成功了  那么就跳转到查询所有的页面 （可以把刚添加完的商品查询出来）
                    location.href = "http://localhost:8080/brand-demo/brand.html";
                }
            })
        }
    
    
    
    </script>
    </body>
    </html>

后端代码：

AddServlet：（需要先抓包请求体中的JSON数据 然后转换成Java格式数据）

package com.itheima.web;
    import com.alibaba.fastjson.JSON;
    import com.itheima.pojo.Brand;
    import com.itheima.service.BrandService;
    import javax.servlet.*;
    import javax.servlet.http.*;
    import javax.servlet.annotation.*;
    import java.io.BufferedReader;
    import java.io.IOException;
    
    @WebServlet("/addServlet")
    public class AddServlet extends HttpServlet {
    
        // new BrandService对象
        private BrandService brandService = new BrandService();
    
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // 接收客户端传递过来添加的数据
            /**
             *  重点注意： request.getParameter 是接收不了JSON形式的数据的 （前端请求是以axios请求的 请求数据是JSON格式： data:"{brandName=kitty}"
             *                                                             如果写成data:"brandName=kitty" 就可以用request接收数据 ）
             *
             *  String brandName =request.getParameter("brandName");
             *  System.out.println(brandName);  // null
             *
             *  也就是说：客户端以JSON数据请求服务器 我们要把JSON数据转换成java数据使用
             *
             *  因此我们需要先获取请求体数据
             */
    
            // 1、获取请求体数据
            BufferedReader bufferedReader =request.getReader();
            // 读一行 （就读刚才那个F12抓包到的请求体数据：{brandName:"kitty"}）
            String params =bufferedReader.readLine();
            // System.out.println(params); // {"brandName":"Kitty"}    可以看出我们把前端以JSON格式请求的数据拿到手了 我们需要进行转换数据格式
    
            // 2、将JSON数据格式转换为java对象格式
            Brand brand =JSON.parseObject(params,Brand.class);
            // System.out.println(brand); // 调用Brand的toString方法  Brand{id=null, brandName='Kitty', companyName='null', ordered=null, description='null', status=null}
    
            // 3、我们把JSON数据转换成Java对象后 前端请求的数据就存放到我们Brand对象的属性当中了（前端请求的数据就是添加商品的数据）
            /**
             *  调用 BrandService 进行添加商品操作
             */
            brandService.add(brand);
    
            // 4、响应给前端成功标识
            response.getWriter().write("success");
    
        }
    
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doGet(request, response);
        }
    }

开启服务器添加结果：

![f55292f2773b466fb9c4cca8651da3e6.png][]

点击提交后（跳转到查询所有页面）：

![97ea42ab6ac64e989e6954f222dde5e8.png][]

[2790e2996ba94867b3ec7b68bb0c00c7.png]: https://img-blog.csdnimg.cn/2790e2996ba94867b3ec7b68bb0c00c7.png
[3d562b7ece88461eb9c6d8db624328a2.png]: https://img-blog.csdnimg.cn/3d562b7ece88461eb9c6d8db624328a2.png
[ca50745ee805444792ba52bb9cf4ee58.png]: https://img-blog.csdnimg.cn/ca50745ee805444792ba52bb9cf4ee58.png
[741724acc375431f9baf442364fcec50.png]: https://img-blog.csdnimg.cn/741724acc375431f9baf442364fcec50.png
[98f9aa58c5a54475bb7742f4cccf5457.png]: https://img-blog.csdnimg.cn/98f9aa58c5a54475bb7742f4cccf5457.png
[logo-16-red.png]: https://www.w3school.com.cn/ui2019/logo-16-red.png
[w3school _ Web _logo-16-red.png_https_www.w3school.com.cn]: https://www.w3school.com.cn/
[e02e2d59fede4491995f2a0a4cd8f18e.png]: https://img-blog.csdnimg.cn/e02e2d59fede4491995f2a0a4cd8f18e.png
[fa3181888647403b84c5b8ccab9a805e.png]: https://img-blog.csdnimg.cn/fa3181888647403b84c5b8ccab9a805e.png
[a04becf5ef83432e8298f40d56ab5bd5.png]: https://img-blog.csdnimg.cn/a04becf5ef83432e8298f40d56ab5bd5.png
[f03f07314d8e45cab288d8816921139e.png]: https://img-blog.csdnimg.cn/f03f07314d8e45cab288d8816921139e.png
[6d8355de3f724b4cbeb6857a3a986c61.png]: https://img-blog.csdnimg.cn/6d8355de3f724b4cbeb6857a3a986c61.png
[50fa9b04ade349fdb30896325d17f30a.png]: https://img-blog.csdnimg.cn/50fa9b04ade349fdb30896325d17f30a.png
[bd2d3fc528034fb1898f24db56efc5ab.png]: https://img-blog.csdnimg.cn/bd2d3fc528034fb1898f24db56efc5ab.png
[9aa04768c62941479338b0edd28395eb.png]: https://img-blog.csdnimg.cn/9aa04768c62941479338b0edd28395eb.png
[c6530e0cedb3425ea0dcf7df57db756c.png]: https://img-blog.csdnimg.cn/c6530e0cedb3425ea0dcf7df57db756c.png
[300f3096975a4f6294727b8d1386ce7b.png]: https://img-blog.csdnimg.cn/300f3096975a4f6294727b8d1386ce7b.png
[feb87a12c99c4d6790ffbd8f375b0f23.png]: https://img-blog.csdnimg.cn/feb87a12c99c4d6790ffbd8f375b0f23.png
[225a178ec684437cbb01bc2f151bf49c.png]: https://img-blog.csdnimg.cn/225a178ec684437cbb01bc2f151bf49c.png
[b0d523987b01425ca491b78ac90ad0b3.png]: https://img-blog.csdnimg.cn/b0d523987b01425ca491b78ac90ad0b3.png
[35010b2f0c714403a7e340465c965d9b.png]: https://img-blog.csdnimg.cn/35010b2f0c714403a7e340465c965d9b.png
[6b8c9e2cef9f4adc895eb435ba1d1517.png]: https://img-blog.csdnimg.cn/6b8c9e2cef9f4adc895eb435ba1d1517.png
[9c0398a17c10426bab71d096c41a6891.png]: https://img-blog.csdnimg.cn/9c0398a17c10426bab71d096c41a6891.png
[32f359ef58c447b69e4f5aafc214d9ac.png]: https://img-blog.csdnimg.cn/32f359ef58c447b69e4f5aafc214d9ac.png
[8ecd3bc99f684eea88cc57a7426d51fc.png]: https://img-blog.csdnimg.cn/8ecd3bc99f684eea88cc57a7426d51fc.png
[f366dd2c22c841c5b95297873faefe5d.png]: https://img-blog.csdnimg.cn/f366dd2c22c841c5b95297873faefe5d.png
[f70a0fb17fa843ff929b54ccd4517cf3.png]: https://img-blog.csdnimg.cn/f70a0fb17fa843ff929b54ccd4517cf3.png
[b9a491bc7a4445bfbc9c8edadead0cb4.png]: https://img-blog.csdnimg.cn/b9a491bc7a4445bfbc9c8edadead0cb4.png
[926c292056a1411697dc2d39f6b8e22a.png]: https://img-blog.csdnimg.cn/926c292056a1411697dc2d39f6b8e22a.png
[ac20466f61af46499872f043844e62a4.png]: https://img-blog.csdnimg.cn/ac20466f61af46499872f043844e62a4.png
[f55292f2773b466fb9c4cca8651da3e6.png]: https://img-blog.csdnimg.cn/f55292f2773b466fb9c4cca8651da3e6.png
[97ea42ab6ac64e989e6954f222dde5e8.png]: https://img-blog.csdnimg.cn/97ea42ab6ac64e989e6954f222dde5e8.png