Ajax实现评论中顶和踩功能的实例代码-巨人网络通讯

Ajax实现评论中顶和踩功能的实例代码

效果大致如下：

javascript这块使用jquery。新建一个Asp.net web项目，使用NuGet获取Jquery最新版。

数据库方面使用Nhibernate，用Install-Package Nhibernate引用。

数据库是用的PostgreSQL，Install-Package Npgsql把驱动装上。我这里偷个懒，数据库名，用户名和密码都是ajaxDemo了。

创建数据库：

复制代码代码如下:

CREATE DATABASE "ajaxDemo" 
  WITH OWNER = "ajaxDemo" 
       ENCODING = 'UTF8' 
       TABLESPACE = pg_default 
       LC_COLLATE = 'Chinese (Simplified)_People''s Republic of China.936' 
       LC_CTYPE = 'Chinese (Simplified)_People''s Republic of China.936' 
       CONNECTION LIMIT = -1;

NHiberate配置文件：

复制代码代码如下:

?xml version="1.0" encoding="utf-8"?>

hibernate-configuration xmlns="urn:nhibernate-configuration-2.2" >
session-factory>
    property name="connection.driver_class">NHibernate.Driver.NpgsqlDriver/property>
    property name="connection.connection_string">
      Server=localhost;Database=ajaxDemo;User ID=ajaxDemo;Password=ajaxDemo;
    /property>
    property name="dialect">NHibernate.Dialect.PostgreSQLDialect/property>
    mapping assembly="AjaxDemo">/mapping>
/session-factory>
/hibernate-configuration>

顺带说一句NHiberate的配置模板是错的，改initial catalog为Database。

我没有使用NHiberate的一对多映射（主要是觉得用不上），实体类有两个Info和Review。

复制代码代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Iesi.Collections.Generic;

namespace AjaxDemo.Modal
{
    public class Info
    {
        public virtual int Id { get; set; }
        public virtual string Content { get; set; }
    }
}

复制代码代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace AjaxDemo.Modal
{
    public class Review
    {
        public virtual int Id { get; set; }
        public virtual int InfoId { get; set; }
        public virtual string Content { get; set; }
        public virtual int Support { get; set; }
        public virtual int Opposition { get; set; }
    }
}

业务层是对应的代码就不贴了。主要就是添加和修改功能。

准备工作到此基本完成了，现在来实现我们所需要的功能。

Ajax最大的特点是可以仅向服务器发送并取回必需的数据，它使用Soap或其它一些基于XML或Json的页面服务接口，并在客户端采用JavaScript处理来自服务器的响应。因为服务器和客户端之间的数据交换的数据大量减少，结果我们就能看到回应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

也就是我们需要两个部分的东西：

1.客户端的处理，基于JQuery

2.服务器端的处理，我选用的一般处理程序（ashx），因为返回的数据很简单，所以没有xml和json。

先来看服务端，我们需要获取用户顶或踩的是哪条评论，所以需要id，顶和踩的处理我写在一起，所以还需要一个参数来区分。

获取到两个参数以后先根据state判断是踩还是顶，然后更新相应条目，服务端返回一个代表当前对应数目的数字。

ChangeState.ashx：

复制代码代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using AjaxDemo.BLL;
using AjaxDemo.Modal;

namespace AjaxDemo.Ajax
{
    /// summary>
    /// 返回更新以后的数目
    /// /summary>
    public class ChangeState : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            int state = int.Parse(context.Request.QueryString["state"]);
            int id=int.Parse(context.Request.QueryString["id"]);
            ReviewService rs = new ReviewService();
            Review r;
            switch (state)
            {
                case 0:
                    r=rs.UpdateSupport(id);
                    context.Response.Write(r.Support);
                    break;
                case 1:
                    r = rs.UpdateOpposition(id);
                    context.Response.Write(r.Opposition);
                    break;
            }
        }

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

再说客服端，因为用的JQuery，活就很少了。使用的$.get方法。

先请求服务端，传入两个参数：state和id，收到服务端数据后更改状态。

主要代码：

复制代码代码如下:

function change(id, state) { 
            $.get("./Ajax/ChangeState.ashx", { id: id, state: state }, function (data, textStatus) { 
                if (textStatus == "success") { 
                    switch (state) { 
                        case 0: 
                            $("#Support" + id).text("顶（" + data + ") "); 
                            break; 
                        case 1: 
                            $("#Opposition" + id).text("踩（" + data + ") "); 
                            break; 
                    } 
                } 
            }); 
        }

页面代码：

复制代码代码如下:

%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ViewDetail.aspx.cs" Inherits="AjaxDemo.ViewDetail" %>

!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">
    script src=https://www.jb51.net/htynkn/archive/2012/01/31/"Scripts/jquery-1.7.1.min.js" type="text/javascript">/script>
    script type="text/javascript">
        function change(id, state) {
            $.get("./Ajax/ChangeState.ashx", { id: id, state: state }, function (data, textStatus) {
                if (textStatus == "success") {
                    switch (state) {
                        case 0:
                            $("#Support" + id).text("顶（" + data + ") ");
                            break;
                        case 1:
                            $("#Opposition" + id).text("踩（" + data + ") ");
                            break;
                    }
                }
            });
        }
    /script>
/head>
body>
    form id="BaseForm" runat="server">
    div id="infoDetail">
    h4>标题/h4>
    h1>
        asp:Label ID="infoContent" runat="server" Text="">/asp:Label>/h1>
    /div>

    div id="reviews">
    h4>评论/h4>
        asp:Repeater ID="reviewList" runat="server">
        HeaderTemplate>ul>/HeaderTemplate>
        FooterTemplate>/ul>/FooterTemplate>
        ItemTemplate>li>%# DataBinder.Eval(Container.DataItem, "Content") %>/li>
        div>

复制代码代码如下:

a onclick="change(%# DataBinder.Eval(Container.DataItem, "Id")%>,0)" id="Support%# DataBinder.Eval(Container.DataItem, "Id")%>" href=https://www.jb51.net/htynkn/archive/2012/01/31/"#">顶（%# DataBinder.Eval(Container.DataItem, "Support") %>）/a>

a onclick="change(%# DataBinder.Eval(Container.DataItem, "Id")%>,1)" id="Opposition%# DataBinder.Eval(Container.DataItem, "Id")%>" href=https://www.jb51.net/htynkn/archive/2012/01/31/"#">踩（%# DataBinder.Eval(Container.DataItem, "Opposition")%>）/a>

/div>
        /ItemTemplate>
        /asp:Repeater>
    /div>
    /form>
/body>
/html>

效果：