前段增删查ajax

后端建立好后路由链接后由前端来执行增删查的任务 可以通过ajax来完成这一点

查询

 $.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" class="close" data-id="${element._id}" data-dismiss="alert" aria-hidden="true">&times;</button>
                                <strong>${element.text}</strong>Alert body ...
                                </div>
                                 `
                            }
                            $(".col-xs-12").html(html);
                        }
                        console.log(res);
                    },
                    error: function (err) {
                        console.log(err);
                    }
                })
               

作用:

url:""内输入后端路由链接，type:""内是执行操作的类型。

success:function(res){}是成功连接后端后运行的函数，其中res是成功后返回的值。

res.data是存储的数据以数组形式出现，res.msg是错误时返回的错误信息，res.status是状态码，这些值都是由后端设置的。

整体效果是在ajax获得后端数据时，使用for循环将res.data内的数据全部添加到一个字符串，并用``包裹标签，最后再通过$("div").html()将字符串内的所有标签和数据输出。

效果:

删除

            $(".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("删除成功");
                        }
                    }
                })
            })

作用:

由于ajax添加标签是在网页打开后，所以使用click事件会没有效果,on()支持动态事件间隔逗号分别写入事件名、子元素、function事件。

type:""为DELETE,data中的_id是选定数据的id,首先在查询时传入到按钮属性中data-id="${element._id}",然后点击按钮时获取该属性的内容var id = $(this).attr("data-id");, 在传入到data就可以删除数据库中对应_id的内容。

增加

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

作用

type:""为POST,data内传入输入框的内容 load()为自定义的查询方法,使用function load(){}把查询包含在大括号内即可,效果为输出成功后即可刷新查询部分.