zoukankan      html  css  js  c++  java
  • 4.无刷新评论

    1.用户可以提交自己的评论,并显示(添加)在评论上。

    2.分别用html页面和aspx页面进行显示。html是一开始就加载所有的评论,而aspx是用repeater进行加载的,把repeater全放在ul中,当用户评论成功后就把此评论内容也加载到客户页面上。

    3.分别用到了两个一般处理程序(服务端),一个为客户端读取评论的数据服务,把每条评论用$隔开,每条记录的内容用|隔开,在客户端进行split分解再显示出来。另一个一般处理程序(服务端)用来写入评论的,此服务端控制用户是否会有骂人等禁用语言。

    4.建立数据表及强类型集:

     

    5.建立加载两个服务端。

       1).HTMLComment.ashx

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using 无刷新评论.DAL.DataSetCommentTableAdapters;
    using System.Text;
    
    namespace 无刷新评论
    {
        /// <summary>
        /// HTMLComment 的摘要说明
        /// </summary>
        public class HTMLComment : IHttpHandler
        {
    
            public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "text/plain";
                var datatable= new T_CommentTableAdapter().GetData();
                if (datatable.Count <= 0)
                {
                    context.Response.Write("none");
                }
                else
                {
                    StringBuilder sb = new StringBuilder();
                    foreach (var data in datatable)
                    {
                       
                        //格式为:IP|127.0.0.1|CreateDate|2013-12-25 14:15:20|.....$
                        sb.Append(data.IP).Append("|").Append(data.CreateDate).Append("|").Append(data.Msg).Append("$");
                    }
                    context.Response.Write(sb.ToString().Trim('$'));
                }
            }
    
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }
    }

       2).RepeaterComment.ashx

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using 无刷新评论.DAL.DataSetCommentTableAdapters;
    
    namespace 无刷新评论
    {
        /// <summary>
        /// RepeaterComment1 的摘要说明
        /// </summary>
        public class RepeaterComment1 : IHttpHandler
        {
    
            public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "text/plain";
                var ip=context.Request.UserHostAddress;
                var msg=context.Request["msg"];
                if (msg.Contains("去死吧") || msg.Contains("它妈的") || msg.Contains("他妈的") || msg.Contains("她妈的") || msg.Contains("TMD"))
                {
                    context.Response.Write("forbid");
                    return;
                }
                try
                {
    
                    new T_CommentTableAdapter().Insert(ip, DateTime.Now, msg);
                    context.Response.Write("ok");
                }
                catch (System.Exception ex)
                {
                    context.Response.Write("error");
                }
                 
    
            }
    
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }
    }

    6.html页

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>   
        <script type="text/javascript">
            $(function () {
                $.post("HTMLComment.ashx", function (data, status) {
    
                    if (!status) {
                        $("#ulcomment").append($("<li>加载失败.</li>"));
                        return;
                    } else if (status == "success") {
                        if (data == "none") {
                            $("#ulcomment").append($("<li>没有任何评论.</li>"));
                            return;
                        }
    
                        var arrs = data.split("$");
                        if (arrs.length <= 0) return;
                        $.each(arrs, function () {
                            var linearrs = this.split("|");
                            $("#ulcomment").append($("<li>IP:" + linearrs[0] + " 日期:" + linearrs[1] + " 内容:" + linearrs[2] + "</li>"));
    
    
                        });
                    }
                });
    
                $("#btncomment").click(function () {
                    if ($("#txtcomment").val() == "")
                        return;
                    var msg = $("#txtcomment").val();
                    $.post("RepeaterComment.ashx", { "msg": msg }, function (data, status) {
                        if (!status) {
                            alert("ajax服务出错");
                            return;
                        } else if (status == "success") {
                            if (data == "ok") {
                                $("#ulcomment").append($("<li>IP:127.0.0.1 日期: " + new Date().toLocaleString() + " 内容:" + msg + "</li>"));
                                alert("发表下评论成功.");
                                $("#txtcomment").val("");
                            } else if (data == "error") {
                                alert("服务端写入出错");
                                return;
                            } else if (data == "forbid") {
                                alert("请注意文明用语,修改后再发布");
                                return;
                            }
    
    
                        } else {
                            alert("不知名的出错了。");
                        }
    
    
    
                    });
                });
            });
            
    
        </script>
        <style type="text/css">
            #txtcomment
            {
                height: 131px;
                width: 581px;
            }
        </style>
    </head>
    <body>
    <ul id="ulcomment">
        
    </ul>
    <textarea id="txtcomment"></textarea>
        <br />
    <input type="button" id="btncomment" value="发表评论"  />
    </body>
    </html>

    repeater控件用到的页:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RepeaterComment.aspx.cs" Inherits="无刷新评论.RepeaterComment" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="css/css.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            #btncomment
            {
                width: 93px;
            }
        </style>
        <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">
    // <![CDATA[
    
            $(function () {
                $("#btncomment").click(function () {
                    var msg = $("#txtcomment").val();
                    if (msg == "none" || msg == "undefined" || msg == "")
                        return;
                    $.post("RepeaterComment.ashx", { "msg": msg }, function (data, status) {
                        if (status == "success") {
                            if (data == "ok") {
                                var childcomment = $("<li>IP:127.0.0.1 日期:" + new Date().toLocaleDateString() + " 内容:" + msg + "</li>");
                                $("#ulcomment").append(childcomment);
                                alert("发表评论成功.");
                                $("#txtcomment").val("");
    
    
                            } else if (data == "error") {
                                alert("服务端写稿数据有误");
                            } else if (data == "forbid") {
                                alert("请注意文明用语,修改后再发布");
                                return;
                            }
    
                        } else {
                            alert("AJAX服务失败.")
                        }
                    });
    
                });
            });          
          
    
    // ]]>
        </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="无刷新评论.DAL.DataSetCommentTableAdapters.T_CommentTableAdapter" 
                UpdateMethod="Update">
                <DeleteParameters>
                    <asp:Parameter Name="Original_id" Type="Int32" />
                </DeleteParameters>
                <InsertParameters>
                    <asp:Parameter Name="IP" Type="String" />
                    <asp:Parameter Name="CreateDate" Type="DateTime" />
                    <asp:Parameter Name="Msg" Type="String" />
                </InsertParameters>
                <UpdateParameters>
                    <asp:Parameter Name="IP" Type="String" />
                    <asp:Parameter Name="CreateDate" Type="DateTime" />
                    <asp:Parameter Name="Msg" Type="String" />
                    <asp:Parameter Name="Original_id" Type="Int32" />
                </UpdateParameters>
            </asp:ObjectDataSource>
            <ul id="ulcomment" class="ul">
              <asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1">
                <ItemTemplate>
                   <li>IP:<%#Eval("IP") %> 日期:<%#Eval("CreateDate") %>  内容:<%#Eval("Msg") %></li>
                </ItemTemplate>
              </asp:Repeater>
            </ul>
        </div>
        <textarea id="txtcomment" style="height: 131px;  485px"></textarea>
        <br />
        <input type="button" id="btncomment" value="提交评论" onclick="return btncomment_onclick()" />
        </form>
    </body>
    </html>

      7.客户端运行效果图:

     

     

  • 相关阅读:
    计算机基础之硬件
    小白日记11:kali渗透测试之服务扫描-banner、dmitry、nmap特征库、操作系统识别、SNMP
    小白日记12:kali渗透测试之服务扫描(二)-SMB扫描
    小白日记10:kali渗透测试之端口扫描-UDP、TCP、僵尸扫描、隐蔽扫描
    小白日记9:kali渗透测试之主动信息收集(二)四层发现:TCP、UDP、nmap、hping、scapy
    小白日记7:kali渗透测试之主动信息收集-发现(一)--二层发现:arping/shell脚本,Netdiscover,scapy
    小白日记8:kali渗透测试之主动信息收集(二)三层发现:ping、traceroute、scapy、nmap、fping、Hping
    小白日记6:kali渗透测试之被动信息收集(五)-Recon-ng
    小白日记5:kali渗透测试之被动信息收集(四)--theHarvester,metagoofil,meltag,个人专属密码字典--CUPP
    小白日记3:kali渗透测试之被动信息收集(二)-dig、whios、dnsenum、fierce
  • 原文地址:https://www.cnblogs.com/yagzh2000/p/3173835.html
Copyright © 2011-2022 走看看