码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-04-05 00:28:16      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:dde   click   pos   one   oda   方法   rev   app   lse   

应用场景:

用户点击功能,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

 

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

标签:dde   click   pos   one   oda   方法   rev   app   lse   

原文地址:https://www.cnblogs.com/xfstu/p/12635333.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!