Ajax和Json综合案例

在这里插入图片描述

1. 查询所有

在这里插入图片描述

创建 b rand.html,使用 axios 发送请求，其中查询一般采用 get的请求方式

&lt;script src="js/axios-0.18.0.js"&gt;&lt;/script&gt;

&lt;script&gt;
    //1. 当页面加载完成后，发送ajax请求
    window.onload = function () {
        //2. 发送ajax请求
        axios({
            method:"get",
            url:"http://localhost:8080/brand-demo/selectAllServlet"
        }).then(function (resp) {
        
		}）
</script&gt;

创建 selectAllSe r v let，写对应查询的servlet，调用 service查询并把查询到的信息进行序列化（转为JSON数据），最后将字符串响应到对应的页面上（并且做中文字符处理），将原先的list 集合（b rand）转变为数组，所以要在html 遍历数组

@WebServlet("/selectAllServlet")
public class SelectAllServlet extends HttpServlet {
    private BrandService brandService = new BrandService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 调用Service查询
        List<Brand&gt; brands = brandService.selectAll();

        //2. 将集合转换为JSON数据   序列化
        String jsonString = JSON.toJSONString(brands);

        //3. 响应数据
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

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

首先获取数据let brands = resp.data;得到数组，接着采用for循环遍历，随后完成拼字符串操作

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

<script>
    //1. 当页面加载完成后，发送ajax请求
    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];

                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>

2. 新增 数据

ajax 提交数据，数据处理问题；Web层响应成功标识，客户端获取并判断是否成功添加，跳转至addBrand.html

在这里插入图片描述

增删改一般采用post请求，先写出基本框架

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

<script>
    //1. 给按钮绑定单击事件
    document.getElementById("btn").onclick = function () {
    
        //2. 发送ajax请求
        axios({
            method:"post",
            url:"http://localhost:8080/brand-demo/addServlet",
            data:
        }).then(function (resp) {
            }
        })
    }
    
</script>

创建AddServlet，接收数据request.getParameter() 不能接收 json的数据,getParameter()的实现方式就是切割字符串，通过and或者=切割，而json数据并没有，格式不也一样，所以不能用；
采用获取请求体，再将请求体中的字符串（JSON字符串）转为Java 对象；
最后设置响应成功标识

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

    private BrandService brandService = new BrandService();

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

        //1. 接收数据,request.getParameter 不能接收json的数据
       /* String brandName = request.getParameter("brandName");
        System.out.println(brandName);*/

        // 获取请求体数据
        BufferedReader br = request.getReader();
        String params = br.readLine();

        // 将JSON字符串转为Java对象
        Brand brand = JSON.parseObject(params, Brand.class);


        //2. 调用service 添加
        brandService.add(brand);

        //3. 响应成功标识
        response.getWriter().write("success");
    }

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

最后返回 html 页面，在发送 ajax请求之前，先处理数据

<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
        }).then(function (resp) {
            // 判断响应数据是否为 success
            if(resp.data == "success"){
                location.href = "http://localhost:8080/brand-demo/brand.html";
            }
        })
    }

</script>