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

最新推荐文章于 2024-04-26 17:07:18 发布

zhanzkw

最新推荐文章于 2024-04-26 17:07:18 发布

阅读量773

点赞数

分类专栏： AJAX 文章标签： ajax function comments class 数据库 xhtml

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

版权

AJAX 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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

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>

zhanzkw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX 笔记4：无刷新评论【版本二（纯AJAX版本：完全静态页面）】

这种方式现在比较流行，为主流，主要是方便和前台静态页面想结合。1：建立数据库，数据表，数据集如AJAX 笔记3。2：新建一个一般处理程序Content.ashx，从数据库中提取评论内容，返回给前台的html页面。返回给客户端的内容格式：评论人IP|日期|内
复制链接

扫一扫