AJAX 无刷新评论

　

　　　　　　　

发表评论的html页面如下：

 

昵称：
评论内容：

发表评论的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.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $.post("HandlerLoadComments.ashx", function (data, status) {
                if (status == "success") {
                    var lines = data.split("$");
                    for (var i = 0; i < lines.length; i++) {
                        var line = lines[i];
                        var field = line.split("|");
                        for (var j = 0; j < field.length; j++)
                            var li = $("<li>" + field[0] + " 说: " + field[1] + "  " + field[2] + "</li>")
                        $("#ulComments").append(li);
                    }
                }
            });


            $("#btnComments").click(function () {
                $.post("HandlerAddComments.ashx", { "user": $("#txtUser").val(), "comments": $("#txtComments").val() }, function (data, status) {
                    if (status == "success") {
                        if (data == "ok") {
                            var comments = $("<li>" + $("#txtUser").val() + " 说: " + $("#txtComments").val() + "," + new Date() + "</li>");
                            $("#ulComments").append(comments);
                        }
                    }
                });
            });
        })       
    </script>
    <style type="text/css">
        #txtComments
        {
            height: 123px;
            width: 197px;
        }
    </style>
</head>
<body>
    <ul id="ulComments">
    </ul>
    昵称：<input type="text" id="txtUser" /><br />
    评论内容：<br />
    <textarea id="txtComments"></textarea><br />
    <input type="button" value="提交" id="btnComments" />
</body>
</html>

刚进入评论页面时AJAX加载数据库中的评论到页面中，实现的页面是一般处理页面：HandlerLoadComments.ashx，代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using ajax1.DAL.DataSetCommentsTableAdapters;
using System.Text;

namespace ajax1
{
    /// <summary>
    /// HandlerComments 的摘要说明
    /// </summary>
    public class HandlerComments : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            var comments = new T_CommentsTableAdapter().GetData();
            StringBuilder sb = new StringBuilder();
            foreach (var comment in comments)
            {
                sb.Append(comment.User).Append("|").Append(comment.Comments).Append("|").Append(comment.CommentsDate).Append("$");
            }
            context.Response.Write(sb.ToString().Trim('$'));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

当提交评论时把评论加载到页面，也是使用一般处理页面：

HandlerAddComments.ashx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using ajax1.DAL.DataSetCommentsTableAdapters;

namespace ajax1
{
    /// <summary>
    /// HandlerAddComments 的摘要说明
    /// </summary>
    public class HandlerAddComments : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string user=context.Request["user"];
            string comments=context.Request["comments"];
            new T_CommentsTableAdapter().Insert(user,comments,DateTime.Now);
            context.Response.Write("ok");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

待修改。。。

posted on 2011-04-22 16:09  波波.  阅读(5744)  评论(8)  编辑  收藏  举报