jQuery中，Ajax发送后刷新局部页面的方法

Posted 2020-11-27 xfstu

应用场景：

用户点击功能，javascript动态生成DOM树，然后用户点击删除，删除成功后，刷新该页面

思路：

将要发送的Ajax用一个函数存起来

 

 然后，当用户点击时，执行该函数，然后生成该DOM树，

再然后，当用户点击该页面上的删除按钮时，发送一个删除命令的Ajax请求，删除完成后，再次调用该函数，请求数据，完成刷新需求。

function navlist(){
    $("#content").html(
        "<table class=‘table table-border table-bordered table-hover tablelook‘><tbody><tr><th>标题</th><th>图标</th><th>网址</th><th>文字</th><th>操作</th></tr></tbody></table>"
    );
    $.ajax({
        type: "get",
        url: "/nav/u/navlist",
        dataType: "json",
        success: function (response) {
            var datajs = response.data;
            for (let index = 0; index < datajs.length; index++) {
                $(".tablelook").append(
                    "<tr>" +
                    "<td>" + datajs[index].title + "</td>" +
                    "<td><img style=‘width:20px‘ src=" + datajs[index].img + "></td>" +
                    "<td><p style=‘overflow: hidden;‘>" + datajs[index].href + "</p></td>" +
                    "<td>" + datajs[index].alt + "</td>" +
                    "<td>" +
                    "<a href=‘javascript:;‘ data_id=‘" + datajs[index].id + "‘>改</a>" +
                    "<span> | </span>" +
                    "<a href=‘javascript:;‘ data_id=‘" + datajs[index].id + "‘>删</a>" +
                    "</td>" +
                    "</tr>"
                );
            }
            $(".tablelook a:odd").click(function (e) {
                e.preventDefault();
                tan(‘提示！‘, ‘我要删除了噢~‘);
                $(".modal-footer .btn").click(function () {
                    $.ajax({
                        type: "post",
                        url: "/nav/u/del",
                        data: "id=" + $(".tablelook a:odd").attr(‘data_id‘),
                        dataType: "json",
                        success: function (response) {
                            if (response.state) {
                                info(‘删除成功！‘);
                                navlist();
                            } else {
                                info(‘删除失败‘);
                            }
                        }
                    });
        
                });
            });
           
        }
    });
}
$("#btn_adminc").click(function (e) {
    e.preventDefault();
    navlist();
});

View Code