最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
基于jquery的ajax实现评论与顶和踩功能
时间:2012-02-01 编辑:简简单单 来源:一聚教程网
这算是社团布置的一个假期小作业吧,我只是提出我自己的解决方案,不一定是最合适的。
效果大致如下:
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配置文件:
代码如下 | 复制代码 |
Server=localhost;Database=ajaxDemo;User ID=ajaxDemo;Password=ajaxDemo; |
顺带说一句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; } } }); } |
页面代码:
代码如下 | 复制代码 |
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ViewDetail.aspx.cs" Inherits="AjaxDemo.ViewDetail" %>
评论 |
效果:
图片分享:
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31