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

lwj_07

已于 2022-07-03 10:18:49 修改

阅读量1.2k

点赞数

分类专栏：笔记文章标签： ajax java 前端 servlet json

于 2022-07-01 16:14:49 首次发布

本文链接：https://blog.csdn.net/lwj_07/article/details/125522090

版权

笔记专栏收录该内容

144 篇文章 18 订阅

订阅专栏

同步和异步：

一、Ajax 快速入门

代码演示如下：

服务端：AjaxServlet：

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("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1. 响应给客户端数据
        response.getWriter().write("hello ajax~");
    }

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

客户端：

<!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 技术教程。https://www.w3school.com.cn/

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

二、例子演示

代码演示如下：

服务端：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>

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

三、Axios

作用：Axios 是 Ajax的代码简写

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

3.1、Axios快速入门：

代码演示如下：

服务端：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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>


<body>

<!-- 1. 引入js文件 -->

<script src="js/axios-0.18.0.js"></script>

<!-- 2. 使用axios发送请求 并获取响应结果 -->
<script>
        // get形式
        axios({
            method:"get",
            url:"http://localhost:8090/ajax-demo/axiosServlet?username=kitty"
        }).then(function (resp){
            alert(resp.data);   // 通过data这个属性就能获取到服务端响应的数据 （hello axios~）
        })

</script>

</body>
</html>

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

3.2、Axios请求方式别名：

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

前端：03-axios-demo2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>


<body>

<!-- 1. 引入js文件 -->

<script src="js/axios-0.18.0.js"></script> 

<!-- 2. 使用axios发送请求 并获取响应结果 -->
<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>

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

四、JSON

4.1、JSON 基础语法

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

代码演示如下：

<!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>

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

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

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

使用步骤：

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

代码演示如下：

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测试类输出结果：

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

前期准备：

思路总体如下以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>


<!-- 引入 axios 的js文件-->
<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>

前端细节：

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

后端（服务器）：

小细节：服务器端需要先抓包获取到前端请求的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);
    }
}

结果：

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

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

注意：前端的东西只需要看懂 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>



<!-- 导入js文件 -->
<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数据响应给前端）

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.IOException;
import java.util.List;

@WebServlet("/selectAllServlet")
public class SelectAllServlet extends HttpServlet {
    // 调用BrandService对象中的查询所有的方法
    private BrandService brandService =new BrandService();

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

        // 1 调用BrandService对象中的查询所有的方法
        List<Brand> brands =brandService.selectAll();

        // 2 把查询出来的集合数据转换成JSON数据形式 展示给前端
        /**
         *  这里也要注意： 查询出来的java数据要转换成JSON数据才能响应给前端进行展示
         */
        String jsonString =JSON.toJSONString(brands);

        // 解决响应时展示给前端页面中文乱码问题 （看response笔记 把html改成json即可）
        response.setContentType("text/json;charset=utf-8");
        // 3 把JSON数据响应给前端
        response.getWriter().write(jsonString);
    }

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

开启服务器结果如下：

增加商品：

前端： 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>


<!-- 引入 axios 的js文件-->
<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);
    }
}

开启服务器添加结果：