业务逻辑

axios+servlet+mybatis实现简单的数据增加操作，并展示在页面

前端

前端使用axios发送post请求，像后端发送Json格式数据，formdate为构造的Json数据。

<script src="js/axios-0.18.0.js"></script>
<script>
    //1.给按钮绑定单击事件
    document.getElementById("btn").onclick = function (){
        var formdate = {
            "brandName":"",
            "companyName":"",
            "ordered":"",
            "description":"",
           "status":"",
        };
        let brandName = document.getElementById("brandName").value;
        formdate.brandName = brandName;
        let companyName = document.getElementById("companyName").value;
        formdate.companyName = companyName;
        let ordered = document.getElementById("ordered").value;
        formdate.ordered = ordered;
        let description = document.getElementById("description").value;
        formdate.description = description;

        let status = document.getElementsByName("status");
        for (let i = 0; i < status.length; i++) {
            if(status[i].checked){
               formdate.status = status[i].value;
            }
        }
     
        //2.发送ajax请求
        axios({
            method:"post",
            url:"http://localhost:8080/brand-demo/addservlet",
            data:formdate
        }).then(function (resp){
            if(resp.data.toString() == "success"){
                location.href = "http://localhost:8080/brand-demo/brand.html"
            }
        })
    }
</script>

后端

使用servlet接受前端发送过来的JSON数据，同时使用fastjson将json数据转为java对象，之后调用service层方法，将json数据转为的对象作为参数丢进add方法中即可。同时通过resopnse写回前端一个字符串"success"，前端收到后可跳转商品展示页面。

@WebServlet("/addservlet")
public class AddServlet extends HttpServlet {

    private BrandService brandService = new BrandService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       //接受的Json数据
        BufferedReader br = request.getReader();
        String readLine = br.readLine();

        //Json数据转对象
        Brand brand = JSON.parseObject(readLine, Brand.class);
        System.out.println(brand);
        brandService.add(brand);
        response.getWriter().write("success");
    }

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

排错过程

添加数据后，页面中文展示不出来

初步怀疑是request或者response数据编码问题，因此测试响应前端数据中编码方法

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<Brand> brands = brandService.selectAll();
        //将集合转为Json数据
        String jsonString = JSON.toJSONString(brands);
        //响应数据
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

响应给前端的JSON数据中，设置编码方式后数据正常。

若不设置编码方式，中文乱码问题出现。

此时定位服务器端，将Json数据转为的java对象打印出来

同时使用JSON方法打印JSON数据

由输出可见，servlet接收json数据正常，json数据封装为java对象正常，因此问题出现在add方法上，此时问题只可能出现在mybatis上，关键字：mybatis插入中文乱码问题，完美解决。
附解决方法：mybatis-config.xml文件中添加utf-8编码方式。characterEncoding=utf-8

<property name="url" value="jdbc:mysql://localhost:3306/store?useUnicode=true&amp;characterEncoding=utf-8&amp;serverTimezone=UTC&amp;useSSL=false"/>

解决问题就很开心，充实的一天！

补充

2022/10/20 spring/springmvc/mybatis框架整合过程中出现同样的问题，插入数据库的数据显示乱码问题，但是服务端controller层接收数据正常。
解决方法：

---

在jdbc.properties中的url里加上characterEncoding属性即可

jdbc.url=jdbc:mysql://localhost:3306/ssm_db?characterEncoding=UTF8

但是有所不同的是，在mybatis-config中使用characterEncoding=utf-8，但是在jdbc.properties中使用characterEncoding=UTF8。

---