ajax JQ获取后台数据 与 axios Vue获取后台数据的对比

ajax JQ

 $(function(){
        $("form").submit(function(){
            $.ajax({
                url:"http://localhost:3000/tag",
                type:"POST",
                data:{text:$("#text").val()},
                success:function(res){
                    if(res.status=== 200){
                        console.log("添加成功");
                        load();
                    }
                }
            })
            return false;
        });

        function load(){
            $.ajax({
            url:"http://localhost:3000/tag",
            type:"GET",
            success:function(res){
                if(res.status==200){
                const data = res.data;
                let html="";
                for (let index = 0; index < data.length; index++) {
                    const element = data[index];
                   html+=  `
                   <div class="alert alert-info pull-left">
            <button type="button" data-id="${element._id}" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <strong>${element.text}</strong>
        </div>
                   `;
                }
                $(".col-xs-12").html(html);

                }
            },
            error:function(err){
                console.log(err);
            }
        })
        }
        $(".col-xs-12").on("click",".close",function(){
            var id=$(this).attr("data-id");
            $.ajax({
                url:"http://localhost:3000/tag",
                type:"DELETE",
                data:{_id:id},
                success:function(res){
                  if(res.status===200){
                   console.log("删除成功")     
                  }
                },
                error:function(err){
                    console.log(err)
                }
            })
        })
     load();
    })

Vue axios

var vm = new Vue({
            el: "#app",
            data: {
                msg: [],
                addtext:""
            },
            methods: {
                load() {
                    axios.get("http://localhost:3000/tag").then(function (response) {
                        vm.msg = response.data.data;

                    }, function (err) {
                        console.log(err)
                    })
                },
                dex(idx){
                    axios.delete("http://localhost:3000/tag", {
                        params: {
                            _id: idx
                        }
                    }).then(function (res) {
                        if (res.status === 200)
                            // vm.load();
                        console.log(res);
                    }, function (err) {
                        console.log(err);
                    })
                    console.log(idx);
                    //    this.xs.xs1();
                    //    console.log(idx);


                },
                add(){
                    axios.post("http://localhost:3000/tag", {
                        
                            text:vm.addtext
                        
                    }).then(function (res) {
                        
                        console.log(res);
                    }, function (err) {
                        console.log(err);
                    })
                    console.log(vm.addtext);
                    //    this.xs.xs1();
                    //    console.log(idx);
                    return false;
                }
            },
            created: function () {
                this.load();
            }
        })

注意点 axios的删除后端获取方式为 ctx.query const data = await tagModel.deleteOne(ctx.query); ajax为 ctx.request.body const data = await tagModel.deleteOne(ctx.request.body);