基于jquery的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="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="#">顶（<%# DataBinder.Eval(Container.DataItem, "Support") %>）</a>

<a onclick="change(<%# DataBinder.Eval(Container.DataItem, "Id")%>,1)" id="Opposition<%# DataBinder.Eval(Container.DataItem, "Id")%>" href="#">踩（<%# DataBinder.Eval(Container.DataItem, "Opposition")%>）</a>

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

 

 

 

 

效果：

 

图片分享：

 

 

时间： 2024-11-01 15:19:34

基于jquery的ajax实现评论与顶和踩功能的相关文章

Ajax实现评论中顶和踩功能的实例代码_实用技巧

效果大致如下: javascript这块使用jquery.新建一个Asp.net web项目,使用NuGet获取Jquery最新版. 数据库方面使用Nhibernate,用Install-Package Nhibernate引用. 数据库是用的PostgreSQL,Install-Package Npgsql把驱动装上.我这里偷个懒,数据库名,用户名和密码都是ajaxDemo了. 创建数据库: 复制代码 代码如下: CREATE DATABASE "ajaxDemo"   WITH O

基于Jquery 解决Ajax请求的页面 浏览器后退前进功能，页面刷新功能实效问题_jquery

需要使用的 jquery.history.js插件 在巨人的肩膀之上,以下前进后退工作基于插件完成! 做了几个兼职,上天帮人完成页面的时候顺便做了一个ajax的请求.发现浏览器的刷新,后退,前进按钮失效.于是乎google了一下.发现了一些解决方法.其中一个jquery.hashchange.js的插件有的时候会失效,有的时候会造成页面多次请求. 换另外一个插件测试下,完美达到我的要求. 总的思路,在url上加上参数,一切工作基于这个参数完成. 复制代码 代码如下: //截取传入字符串中第一次出

php结合ajax实现赞、顶、踩功能实例_php实例

php应用越来越多,也越来越广泛,为了增加网站的丰富多彩,从而出现了很多新的技术.ajax是现代网站中不能缺少的一项技术,他可以异步刷新数据,而实现很多效果,比如刷新验证码,微博中的赞功能,都是运用这个. 本次赞功能的效果图: 主页文件(index.php): 复制代码 代码如下: <script type="text/javascript" src="http://www.jb51.net/js/jquery.min.js"></script&g

基于jquery实现ajax无刷新评论_jquery

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

基于jquery的ajax数据传输

问题描述 基于jquery的ajax数据传输 $("li").click(function(){ $.ajax({ type:"post", url:"ShowBookAction.action", data:"type="+$(this).attr("title"), datatype:"json", success:function(data){ } 我这个type为中文,后台req

基于jQuery的ajax方法封装_jquery

ajax (ajax开发)简介 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 在实际的项目里,ajax的应用频率很高

php基于jquery的ajax技术传递json数据简单实例_php技巧

本文实例讲述了php基于jquery的ajax技术传递json数据简单实现方法.分享给大家供大家参考,具体如下: html页面: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.2.mi

基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法_jquery

情景 目前有个需求是在文本框填入内容,自动触发keyup事件,下拉列表会自动过滤相应的选项,但是使用了$,ajax后发现,每次触发事件时,都导致整个网页闪烁,触发了全局ajax事件 代码片段 $.ajax({ type: "POST", url: root + "/xxx, data: requestData, dataType: "json", success: function(data){ // 清空列表 $("#formOpinion #

基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)_jquery

相关阅读: 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能) 今天测试提了一个bug,发送短信倒计时功能,要求关闭页面也要进行倒计时.这想到了,当年我参与的周杰伦演唱会的先付先抢功能.与之类似,只不过,那个项目的时间都是服务器时间,本人目前有点偷懒,就用客户端的时间了. 一下是完整的代码,只不过在客户端的效率不是很好. <!doctype html> <html lang="en"> <head> <meta