欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-03-03 17:18:28
效果大致如下: javascript这块使用jquery。新建一个asp.net web项目,使用nuget获取jquery最新版。 数据库方面使用nhibern...

效果大致如下:

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

javascript这块使用jquery。新建一个asp.net web项目,使用nuget获取jquery最新版。

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

数据库方面使用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 *.936'
       lc_ctype = 'chinese (simplified)_people''s *.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=//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=//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=//www.jb51.net/htynkn/archive/2012/01/31/"#">踩(<%# databinder.eval(container.dataitem, "opposition")%>)</a>

</div>
        </itemtemplate>
        </asp:repeater>
    </div>
    </form>
</body>
</html>

效果:

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

 

写在最后:

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