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配置文件：

NHibernate.Driver.NpgsqlDriver

Server=localhost;Database=ajaxDemo;User ID=ajaxDemo;Password=ajaxDemo;

NHibernate.Dialect.PostgreSQLDialect

顺带说一句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

{

///

/// 返回更新以后的数目

///

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;

}

}

});

}

页面代码：

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;

}

}

});

}

标题

评论

,0)" id="Support" href=https://www.jb51.net/htynkn/archive/2012/01/31/"#">顶()

,1)" id="Opposition" href=https://www.jb51.net/htynkn/archive/2012/01/31/"#">踩()

效果：

写在最后：

1.这篇文章主要是写一点大致做法，不完整也不全面。很多错误什么的都没有处理，也没有对细节进行考究。

2.服务端也可以用webthod，特别是修改现有项目的时候，直接将方法保留给客服端javascript调用就行了。我比较疑惑ashx和webmethod到底哪个好些。

3.单元测试那个纯粹是为了方便…不要喷哈

4.NHiberate的配置模板…我最开始为此纠结了很久…

5.相关库和软件的版本：Iesi.Collection 3.2.0.4000 Jquery 1.7.1 NHiberate 3.2.0.4000 Npgsql 2.0.11 Nunit 2.5.10.11092