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=http://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=http://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=http://www.jb51.net/htynkn/archive/2012/01/31/"#">踩(<%# DataBinder.Eval(Container.DataItem, "Opposition")%>)</a>

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

效果:

写在最后:

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

时间: 2013-04-26

PHP Ajax实现页面无刷新发表评论

大家都有在网站发表评论的经历,传统的发表过程无非是:发表->提交页面表单->等待刷新页面,这样在网络比较拥挤的时候,往往需要漫长的等待,今天介绍用PHP+Ajax实现页面无刷新发表评论,希望对初学ajax的PHPer有所帮助. 那么首先,我们需要一个基本的ajax开发框架,文件ajax.js就包含了这个框架,代码如下: var http_request=false;  function send_request(url){//初始化,指定处理函数,发送请求的函数    http_request

来自chinaz的ajax获取评论代码

ajax获取到的字符是类似下面的内容 复制代码 代码如下: {a:"<div class='pl_list'><div><span class='float_right'><a href=javascript:goodbad(22835,26769,'good',1) title='支持一下'>支持:[ 0 ]</a>    <a href=javascript:goodbad(22835,26769,'bad',1) title

Asp.net利用JQuery AJAX实现无刷新评论思路与代码

首先在数据库中就建三个字段的表用来存储用户名和评论信息,Id只是为了设置唯一标示,所以设置成整型自增字段就行了. 再建一个HTML页面,只需简单的拉几个html控件出来摆着就行,注意在页面顶部有个<table>标签用来占位输出评论内容. Html页面代码就这样简单就行了: 复制代码 代码如下: <body><table id="room"> </table> <div> 用户名:<input id="Text1

基于jquery实现ajax无刷新评论

jquery实现ajax无刷新评论需要用的技术:(本次试验用的是"jquery-1.4.2.js"版本的jquery) $.post("一般处理程序路径",{以字典的形式传递参数},function(data,status){``````}); jquery中的基本选择器操作: 首先创建数据库"T_article": 主键设置自增: 然后创建一个强类型的DataSet. 接着创建一个"无刷新评论.aspx"页面: 页面代码如下

Ajax实现评论提交

复制代码 代码如下: document.write('<DIV id="loadingg"  style="HEIGHT:65px; WIDTH: 205px;POSITION: absolute; Z-INDEX:1000;border:3px #fff solid;text-align:center; font-size:12px; font-family:Arial, Helvetica, sans-serif;color:#660000;background:#

一个jsp+AJAX评论系统第1/2页

这是一个简单的评论系统,使用了JDOM(这边使用Jdom-b9),实例使用JSP作为视图,结合使用AJAX(用到prototype-1.4),Servlet和JavaBean作为后台处理,使用xml文件存储数据. 1.应用目录结构如下: data   |--comment.xml js   |--prototype.js   |--ufo.js(UTF-8格式)                                                                    

ajax无刷新评论功能

这是留言板的界面,当用户点击提交留言的时候,自动提交到我的留言下面 留言内容中为空,或者为灰色的"没有填写留言内容"都会弹出 请填写留言内容,当用户填写信息的会在右下角显示当前留言的字数. 下面是javascript的代码 //去掉左右尖括号 并用去掉空格后的字符串替代显示 function replaceBrackets(id) { var inputValue = $("#" + id).val(); while (inputValue.indexOf(&quo

asp.net Ajax之无刷新评论介绍

首先还是建一个DoComments.aspx页面和一个DealComments.ashx页面(代码基本上都有注释,如果没写注释,请先看前几篇!).Docomments.aspx页面中的代码为: 复制代码 代码如下: <head runat="server"> <title></title> <script type="text/javascript"> var objXmlHttp = null; function C

ASP+Ajax实现无刷新评论简单例子

<!--#include file="command.asp" --> <% Dim  CurPage CurPage=cint(Request("page")) If CurPage = empty or CurPage<1 Then       CurPage = 1 End If Response.ContentType="application/xml" Response.Charset="gb2312&

jQuery实现的简单无刷新评论功能示例

本文实例讲述了jQuery实现的简单无刷新评论功能.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无刷新评论 - www.jb51.net</title> <script src="jquery-1.7.2.min.js" type="text/javascript"></scr

AJAX PHP无刷新form表单提交的简单实现(推荐)

ajax.php: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <script language="javascript"> function saveUserInfo() { //获取

将form表单通过ajax实现无刷新提交的简单实例

实例如下: //将form转换为AJAX提交 function ajaxSubmit(url,frm,fn){ var dataPara=getFormJson(frm); $.ajax({ url:url, type:"post", data:dataPara, async:false, dataType:'txt', success:fn }); } //将form中的值转换为键值对 function getFormJson(frm){ var o={}; var a=$(frm)

C#使用jQuery实现无刷新评论提交的方法

本文实例讲述了C#使用jQuery实现无刷新评论提交的方法.分享给大家供大家参考.具体分析如下: 首先在数据库中就建三个字段的表用来存储用户名和评论信息,Id只是为了设置唯一标示,所以设置成整型自增字段就行了. 再建一个HTML页面,只需简单的拉几个html控件出来摆着就行,注意在页面顶部有个标签用来占位输出评论内容. Html页面代码就这样简单就行了: <body><table id="room"> </table> <div> 用户名

jQuery+Ajax实现无刷新操作

使用jQuery实现Ajax操作        想要实现Ajax页面无刷新效果,但是直接利用Ajax代码实在有些麻烦,所以就想用jQuery实现.jQuery很好的封装了Ajax的核心对象XMLHTTPRequest.所以用起来非常方便.        首先,创建服务器端代码,这里用Servlet实现服务器端的数据处理:代码如下: protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws Serv

php+ajax实现无刷新数据分页的办法

本文实例讲述了php+ajax实现无刷新分页的方法.分享给大家供大家参考.具体实现方法如下: index.php 文件,代码如下: <?php header("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码 ?> <html> <head> <title>ajax分页演示</title> <script language="javascript"