前后端的增删改

198 阅读1分钟

删除和请求:

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

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

            //前后端交互  请求数据
            $.ajax({
                        url:"http://localhost:3007/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);
                            }
                            console.log(res);
                        },
                        error:function(err){
                            console.log(err);
                        }
                    })
                    }
    })

请求路径:

url:"http://localhost:3007/tag",
type:"GET",

bootstrap样式:

<button type="button" data-id="${element._id}"
class="close" data-dismiss="alert" 
aria-hidden="true">&times;</button>
<strong>${element.text}</strong></div>

注解(删除、添加、查询、修改都是使用ajax的方法进行对数据库(后端)的修改)

1.webp 添加代码: 原生(form提交):

2.png