AJAX 笔记4：无刷新评论【版本二（纯AJAX版本：完全静态页面）】

来源：互联网发布：阿里云esc重装系统编辑：程序博客网时间：2024/06/11 19:47

这种方式现在比较流行，为主流，主要是方便和前台静态页面想结合。

1：建立数据库，数据表，数据集如AJAX 笔记3。

2：新建一个一般处理程序Content.ashx，从数据库中提取评论内容，返回给前台的html页面。

返回给客户端的内容格式：评论人IP|日期|内容|$评论人IP|日期|内容

<%@ WebHandler Language="C#" Class="Comment" %>using System;using System.Web;using System.Text;using DataSetPostTableAdapters;//添加命名空间using System.Data.SqlClient;//添加命名空间public class Comment : IHttpHandler{    public void ProcessRequest(HttpContext context)    {        context.Response.ContentType = "text/plain";        var comments = new T_PostTableAdapter().GetData();        StringBuilder sb = new StringBuilder();        foreach (var comment in comments)        {            sb.Append(comment.IPAddr).Append("|").Append(comment.PostDate).Append("|").Append(comment.Msg).Append("$");        }        context.Response.Write(sb.ToString().Trim('$'));    }    public bool IsReusable    {        get        {            return false;        }    }}

3：新建一个一般处理程序Comment.ashx，用于向数据库中添加评论。

<%@ 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"];        if (msg.Contains("TMD") || msg.Contains("去死吧"))        {            context.Response.Write("forbid");            return;         }        new DataSetPostTableAdapters.T_PostTableAdapter().Insert(context.Request.UserHostAddress, msg, DateTime.Now);               context.Response.Write("ok");    }    public bool IsReusable    {        get        {            return false;        }    }}

4：前台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="Scripts/jquery-1.4.1.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            $.post("NeiRong.ashx", function (data, status) {                if (status != "success") {                    $("#content").append($("<li>评论加载失败！</li>"));                    return;                }                else {                    var lines = data.split("$");                    for (var i = 0; i < data.length; i++) {                        var line = lines[i];                        var fields = line.split("|");                        var content = $("<li>IP地址：" + fields[0] + "发帖日期：" + fields[1] + "内容：" + fields[2]+  "</li>");                        $("#content").append(content);                     }                }            });        });        $(function () {            $("#btnPost").click(function () {                $.post("Pinglun.ashx", { "msg": $("#comment").val() }, function (data, status) {                    if (status != "success") {                        alert("发表评论失败！");                        return;                    }                    if (data == "ok") {                        var content = $("<li>IP地址,自己，发帖日期：" + new Date() + "内容：" + $("#comment").val() + "</li>");                        $("#content").append(content);                        alert("发表评论成功！");                    }                    else {                        alert("评论内容有问题！");                    }                });            });        });    </script></head><body><ul id="content"></ul><textarea id="comment" cols="20" rows="2"></textarea><br /><input id="btnPost" type="button" value="评论" /></body></html>