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

来源：互联网发布：游奇网络有多少人编辑：程序博客网时间：2024/06/06 00:17

案例：新闻的无刷新评论，防止打断视频播放。刚进入界面的时候评论也是页面显示后才加载， “ 正在加载评论 ” 。界面上有一个表格，逐条显示评论，页面刚进来的时候显示已有评论。用户在评论文本框中输入文本，点击评论按钮，向服务器发出 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>