AJAX 笔记3：无刷新评论【版本一（AJAX+JQuary+Rrepeater+SQL Server）】

最新推荐文章于 2021-08-05 20:30:54 发布

zhanzkw

最新推荐文章于 2021-08-05 20:30:54 发布

阅读量1k

点赞数

分类专栏： AJAX 文章标签： ajax sql server asp function string server

本文链接：https://blog.csdn.net/studyalllife/article/details/6765692

版权

AJAX 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

案例：新闻的无刷新评论，防止打断视频播放。刚进入界面的时候评论也是页面显示后才加载， “ 正在加载评论 ” 。界面上有一个表格，逐条显示评论，页面刚进来的时候显示已有评论。用户在评论文本框中输入文本，点击评论按钮，向服务器发出 ajax 请求，将用户的评论内容发给服务器，如果服务器返回 “ 插入成功 ” 的消息则将用户的评论动态添加到现有表格中，如果用户评论中含有 “ TMD ” 、 “ 去死 ” 等不良信息则提示用户 “ 请文明用语 ” 。

注意：AJAX无刷新评论不需要用服务端控件，因为服务端控件是WebForm用来在服务端代码中方便取值的方法。能用客户端控件就不用服务端控件！

版本一（AJAX+Rrepeater+SQL Server）

在VS中新建数据库：

数据库建立好以后，等几秒钟，数据库自动登录连接好：

建立评论表：

建立数据集：

点击确定，然后，有个提示：

建立数据集结果如下：

然后，拖拽数据表：

最后结果如下：

建立服务器处理程序：pinglun.ashx
注意这一句：

 new DataSetPostTableAdapters.T_PostTableAdapter().Insert(context.Request.UserHostAddress, msg, DateTime.Now);

把下面的复制：pinglun.ashx中

却发现：

解决之道：

1：先把pinglun.ashx编译运行一下！
2：然后可以看到如下内容：

展开如下：

点击选中内容：T_PostTableAdapter()就可以使用了。

<%@ WebHandler Language="C#" Class="pinglun" %>

using System;
using System.Web;


public class pinglun : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        string msg = context.Request["msg"];
        new DataSetPostTableAdapters.T_PostTableAdapter().Insert(context.Request.UserHostAddress, msg, DateTime.Now);//往数据库中插入内容
        context.Response.Write("ok");
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

至此，处理程序完成。

前台pinglun.aspx：

添加数据源：

然后的界面中，点击完成。

添加Repeater控件：

为Repeater添加样式，并绑定数据

 <ul id="Comment">
        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1">
        <ItemTemplate>
        <li>评论人IP：<%#Eval("IPAddr") %> 评论日期：<%#Eval("PostDate") %>内容：<%#Eval("Msg") %></li>
        </ItemTemplate>
        </asp:Repeater>
        </ul>

JQuary代码：

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnPost").click(function () {
                $.post("pinglun.ashx", { "msg": $("#textComment").val() },
                function (data, status) {
                    if (status != "success") {
                        alert("评论发表失败，请重试！");
                        return;
                    }
                    if (data == "ok") {
                        var newComment = $("<li>评论人IP：自己，评论日期：" + new Date() + ",内容：" + $("#textComment").val() + "</li>");
                        $("#Comment").append(newComment);
                        alert("评论发表成功");
                    }
                    else {
                        alert("评论发表内容有问题！");
                    }
                });
            });

        });
    </script>

前台最终代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnPost").click(function () {
                $.post("pinglun.ashx", { "msg": $("#textComment").val() },
                function (data, status) {
                    if (status != "success") {
                        alert("评论发表失败，请重试！");
                        return;
                    }
                    if (data == "ok") {
                        var newComment = $("<li>评论人IP：自己，评论日期：" + new Date() + ",内容：" + $("#textComment").val() + "</li>");
                        $("#Comment").append(newComment);
                        alert("评论发表成功");
                    }
                    else {
                        alert("评论发表内容有问题！");
                    }
                });
            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
            DeleteMethod="Delete" InsertMethod="Insert" 
            OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" 
            TypeName="DataSetPostTableAdapters.T_PostTableAdapter" UpdateMethod="Update">
            <DeleteParameters>
                <asp:Parameter Name="Original_id" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="IPAddr" Type="String" />
                <asp:Parameter Name="Msg" Type="String" />
                <asp:Parameter Name="PostDate" Type="DateTime" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="IPAddr" Type="String" />
                <asp:Parameter Name="Msg" Type="String" />
                <asp:Parameter Name="PostDate" Type="DateTime" />
                <asp:Parameter Name="Original_id" Type="Int32" />
            </UpdateParameters>
        </asp:ObjectDataSource>
        <ul id="Comment">
        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1">
        <ItemTemplate>
        <li>评论人IP：<%#Eval("IPAddr") %> 评论日期：<%#Eval("PostDate") %>内容：<%#Eval("Msg") %></li>
        </ItemTemplate>
        </asp:Repeater>
        </ul>
        <br />
        <br />
        评论内容：<br />
        <br />
 <textarea id="textComment" cols="20" name="S1" rows="2"></textarea><br />
        <input id="btnPost" type="button" value="提交" /></div>
    </form>
</body>
</html>