《完美世界》txt全集,盗墓笔记小说

主頁(yè) > 知識(shí)庫(kù) > Ajax實(shí)現(xiàn)評(píng)論中頂和踩功能的實(shí)例代碼

Ajax實(shí)現(xiàn)評(píng)論中頂和踩功能的實(shí)例代碼

效果大致如下：

javascript這塊使用jquery。新建一個(gè)Asp.net web項(xiàng)目，使用NuGet獲取Jquery最新版。

數(shù)據(jù)庫(kù)方面使用Nhibernate，用Install-Package Nhibernate引用。

數(shù)據(jù)庫(kù)是用的PostgreSQL，Install-Package Npgsql把驅(qū)動(dòng)裝上。我這里偷個(gè)懶，數(shù)據(jù)庫(kù)名，用戶(hù)名和密碼都是ajaxDemo了。

創(chuàng)建數(shù)據(jù)庫(kù)：

復(fù)制代碼代碼如下:

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

復(fù)制代碼代碼如下:

?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>

順帶說(shuō)一句N(xiāo)Hiberate的配置模板是錯(cuò)的，改initial catalog為Database。

我沒(méi)有使用NHiberate的一對(duì)多映射（主要是覺(jué)得用不上），實(shí)體類(lèi)有兩個(gè)Info和Review。

復(fù)制代碼代碼如下:

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; }
    }
}

復(fù)制代碼代碼如下:

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; }
    }
}

業(yè)務(wù)層是對(duì)應(yīng)的代碼就不貼了。主要就是添加和修改功能。

準(zhǔn)備工作到此基本完成了，現(xiàn)在來(lái)實(shí)現(xiàn)我們所需要的功能。

Ajax最大的特點(diǎn)是可以?xún)H向服務(wù)器發(fā)送并取回必需的數(shù)據(jù)，它使用Soap或其它一些基于XML或Json的頁(yè)面服務(wù)接口，并在客戶(hù)端采用JavaScript處理來(lái)自服務(wù)器的響應(yīng)。因?yàn)榉?wù)器和客戶(hù)端之間的數(shù)據(jù)交換的數(shù)據(jù)大量減少，結(jié)果我們就能看到回應(yīng)更快的應(yīng)用。同時(shí)很多的處理工作可以在發(fā)出請(qǐng)求的客戶(hù)端機(jī)器上完成，所以Web服務(wù)器的處理時(shí)間也減少了。

也就是我們需要兩個(gè)部分的東西：

1.客戶(hù)端的處理，基于JQuery

2.服務(wù)器端的處理，我選用的一般處理程序（ashx），因?yàn)榉祷氐臄?shù)據(jù)很簡(jiǎn)單，所以沒(méi)有xml和json。

先來(lái)看服務(wù)端，我們需要獲取用戶(hù)頂或踩的是哪條評(píng)論，所以需要id，頂和踩的處理我寫(xiě)在一起，所以還需要一個(gè)參數(shù)來(lái)區(qū)分。

獲取到兩個(gè)參數(shù)以后先根據(jù)state判斷是踩還是頂，然后更新相應(yīng)條目，服務(wù)端返回一個(gè)代表當(dāng)前對(duì)應(yīng)數(shù)目的數(shù)字。

ChangeState.ashx：

復(fù)制代碼代碼如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using AjaxDemo.BLL;
using AjaxDemo.Modal;

namespace AjaxDemo.Ajax
{
    /// summary>
    /// 返回更新以后的數(shù)目
    /// /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;
            }
        }
    }
}

再說(shuō)客服端，因?yàn)橛玫腏Query，活就很少了。使用的$.get方法。

先請(qǐng)求服務(wù)端，傳入兩個(gè)參數(shù)：state和id，收到服務(wù)端數(shù)據(jù)后更改狀態(tài)。

主要代碼：

復(fù)制代碼代碼如下:

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; 
                    } 
                } 
            }); 
        }

頁(yè)面代碼：

復(fù)制代碼代碼如下:

%@ 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=https://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>標(biāo)題/h4>
    h1>
        asp:Label ID="infoContent" runat="server" Text="">/asp:Label>/h1>
    /div>

    div id="reviews">
    h4>評(píng)論/h4>
        asp:Repeater ID="reviewList" runat="server">
        HeaderTemplate>ul>/HeaderTemplate>
        FooterTemplate>/ul>/FooterTemplate>
        ItemTemplate>li>%# DataBinder.Eval(Container.DataItem, "Content") %>/li>
        div>

復(fù)制代碼代碼如下:

a onclick="change(%# DataBinder.Eval(Container.DataItem, "Id")%>,0)" id="Support%# DataBinder.Eval(Container.DataItem, "Id")%>" href=https://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=https://www.jb51.net/htynkn/archive/2012/01/31/"#">踩（%# DataBinder.Eval(Container.DataItem, "Opposition")%>）/a>

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

效果：

寫(xiě)在最后：

1.這篇文章主要是寫(xiě)一點(diǎn)大致做法，不完整也不全面。很多錯(cuò)誤什么的都沒(méi)有處理，也沒(méi)有對(duì)細(xì)節(jié)進(jìn)行考究。

2.服務(wù)端也可以用webthod，特別是修改現(xiàn)有項(xiàng)目的時(shí)候，直接將方法保留給客服端javascript調(diào)用就行了。我比較疑惑ashx和webmethod到底哪個(gè)好些。

3.單元測(cè)試那個(gè)純粹是為了方便…不要噴哈

4.NHiberate的配置模板…我最開(kāi)始為此糾結(jié)了很久…

5.相關(guān)庫(kù)和軟件的版本：Iesi.Collection 3.2.0.4000 Jquery 1.7.1 NHiberate 3.2.0.4000 Npgsql 2.0.11 Nunit 2.5.10.11092

您可能感興趣的文章:

基于jquery實(shí)現(xiàn)ajax無(wú)刷新評(píng)論
Asp.net利用JQuery AJAX實(shí)現(xiàn)無(wú)刷新評(píng)論思路與代碼
asp.net Ajax之無(wú)刷新評(píng)論介紹
ASP+Ajax實(shí)現(xiàn)無(wú)刷新評(píng)論簡(jiǎn)單例子
PHP Ajax實(shí)現(xiàn)頁(yè)面無(wú)刷新發(fā)表評(píng)論
PHP Ajax實(shí)現(xiàn)頁(yè)面無(wú)刷新發(fā)表評(píng)論
一個(gè)jsp+AJAX評(píng)論系統(tǒng)
Ajax實(shí)現(xiàn)評(píng)論提交
來(lái)自chinaz的ajax獲取評(píng)論代碼
ajax無(wú)刷新評(píng)論功能

標(biāo)簽：湖州福州衢州紅河西寧宣城西藏岳陽(yáng)

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《Ajax實(shí)現(xiàn)評(píng)論中頂和踩功能的實(shí)例代碼》，本文關(guān)鍵詞 Ajax,實(shí)現(xiàn),評(píng)論,中頂,和,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。