Ajax实例-无刷新评论、分页、删除评论

注：该页面需有较好的JQuery基础。

 

共要实现3个功能：

1. 发表评论

2. 无刷新分页

3. 无刷新删除评论

 

思路：

页面中放<input type="hidden"/>控件，自定义个属性用于存放用户选择的页码，默认1。

页面中放<table><tr></tr></table>,每个页码对应一个<td></td>，添加到tr中。

页面中放<table></table>，每条评论对应一个<tr></tr>，添加到table中。

1. 点击发表按钮->向发表评论处理页发起Ajax请求->删除当前评论表格的所有行->根据隐藏控件存储的属性刷新当前页面的评论。

2. 点击不同页码->删除当前评论表格的所有行->设置隐藏控件的属性->根据隐藏控件存储的属性刷新当前页面的评论。

3. 点击删除按钮->获得按钮存储的对应的评论id,发起删除评论请求->根据隐藏控件存储的属性刷新当前页面的评论。

 

//评论
        function postComment() {
            //发起  发表评论的ajax请求
            $.post("../05CommentWithoutRefresh/AddComment.ashx", { "comment": $("#txa").val() }, function (data, status) {
                if (status == "success") {
                    if (data == "ok") {
                        alert("评论成功!");
                        //发表评论后 ，清空评论框
                        $("#txa").val("");
                        //每次发表评论后  刷新页数
                        getPages();
                        //刷新当前页的评论
                        showComment();
                    }
                }
            });
        }

        //刷新评论页数
        function getPages() {
            //删除当前页面所有页码
            $("#tr_pages td").remove();
            //发起  获取页数ajax请求
            $.post("../07PageWithoutRefresh/Handler1.ashx", function (data, status) {
                // 如果隐藏控件绑定的页数  大于最大页数  则设置为最大页数（这样删除最后一页的评论，不会最后一页没有评论了却还存在页码）
                var hdn_page = $("#hdn").attr("pageNum");
                if (hdn_page > data + 1) {
                    $("#hdn").attr("pageNum", data + 1);
                }
                //创建1-n的页码
                for (var i = 0; i < data; i++) {
                    //创建页码  并绑定点击事件(显示点击页的评论)
                    var td = $("<td>" + (i + 1) + "</td>").css("cursor", "pointer").click(function () {
                        //将点击的页数绑定给影藏控件的属性
                        var pageNum = $(this).text();
                        $("#hdn").attr("pageNum", pageNum);
                        //刷新评论
                        showComment();
                    });
                    $("#tr_pages").append(td);
                }
            });
        }

        //按页数获取评论
        function showComment() {
            //取页数
            var pageNum = $("#hdn").attr("pageNum");
            //发起 获取评论ajax请求
            $.post("../07PageWithoutRefresh/GetCommentsByPage.ashx", { "pageIndex": pageNum }, function (data, status) {
                if (status == "success") {
                    var comments = $.parseJSON(data);
                    //清空评论表格
                    $("#tbl_comment tr").remove();
                    //遍历评论
                    for (var i = 0; i < comments.length; i++) {
                        var comment = comments[i];
                        //创建评论行
                        var tr = $("<tr><td>编号:" + comment.Id + "</td><td>内容:" + comment.Comment + "</td><td>Ip:" + comment.Ip + "</td></tr>");
                        var del_td = $("<td></td>");
                        //删除按钮  绑定按钮所代表评论的id  绑定点击事件
                        var btn = $("<button>删除</button>").attr("id", comment.Id).click(function () {
                            var id = $(this).attr("id");
                            //删除ajax请求
                            $.post("../08deleteRowWithoutRefresh/Handler1.ashx", { "id": id }, function (data, status) {
                                if (status == "success") {
                                    if (data == "ok") {
                                        //删除成功后  刷新页码  刷新当前页的评论
                                        getPages();
                                        showComment();
                                    }
                                }
                            });
                        });
                        del_td.append(btn);
                        tr.append(del_td);
                        $("#tbl_comment").append(tr);
                    }
                }
            });
        }

        function init() {
            getPages();
            showComment();
        }