主頁 > 知識庫 > Ajax實現(xiàn)評論中頂和踩功能的實例代碼

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

熱門標簽:凱立德導航官網(wǎng)地圖標注 五常地圖標注 地圖標注和認領(lǐng) 萊蕪外呼電銷機器人價格 電銷語音自動機器人 鄭州400電話辦理 聯(lián)通 戶外地圖標注軟件手機哪個好用 智能電話營銷外呼系統(tǒng) 長春呼叫中心外呼系統(tǒng)哪家好

效果大致如下:

javascript這塊使用jquery。新建一個Asp.net web項目,使用NuGet獲取Jquery最新版。

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

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

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

復制代碼 代碼如下:

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


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

準備工作到此基本完成了,現(xiàn)在來實現(xiàn)我們所需要的功能。

Ajax最大的特點是可以僅向服務器發(fā)送并取回必需的數(shù)據(jù),它使用Soap或其它一些基于XML或Json的頁面服務接口,并在客戶端采用JavaScript處理來自服務器的響應。因為服務器和客戶端之間的數(shù)據(jù)交換的數(shù)據(jù)大量減少,結(jié)果我們就能看到回應更快的應用。同時很多的處理工作可以在發(fā)出請求的客戶端機器上完成,所以Web服務器的處理時間也減少了。

也就是我們需要兩個部分的東西:

1.客戶端的處理,基于JQuery

2.服務器端的處理,我選用的一般處理程序(ashx),因為返回的數(shù)據(jù)很簡單,所以沒有xml和json。

先來看服務端,我們需要獲取用戶頂或踩的是哪條評論,所以需要id,頂和踩的處理我寫在一起,所以還需要一個參數(shù)來區(qū)分。

獲取到兩個參數(shù)以后先根據(jù)state判斷是踩還是頂,然后更新相應條目,服務端返回一個代表當前對應數(shù)目的數(shù)字。

ChangeState.ashx:

復制代碼 代碼如下:

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


再說客服端,因為用的JQuery,活就很少了。使用的$.get方法。

先請求服務端,傳入兩個參數(shù):state和id,收到服務端數(shù)據(jù)后更改狀態(tài)。

主要代碼:

復制代碼 代碼如下:

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=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>標題/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=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>

效果:

 

寫在最后:

1.這篇文章主要是寫一點大致做法,不完整也不全面。很多錯誤什么的都沒有處理,也沒有對細節(jié)進行考究。

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

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

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

5.相關(guān)庫和軟件的版本: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實現(xiàn)ajax無刷新評論
  • Asp.net利用JQuery AJAX實現(xiàn)無刷新評論思路與代碼
  • asp.net Ajax之無刷新評論介紹
  • ASP+Ajax實現(xiàn)無刷新評論簡單例子
  • PHP Ajax實現(xiàn)頁面無刷新發(fā)表評論
  • PHP Ajax實現(xiàn)頁面無刷新發(fā)表評論
  • 一個jsp+AJAX評論系統(tǒng)
  • Ajax實現(xiàn)評論提交
  • 來自chinaz的ajax獲取評論代碼
  • ajax無刷新評論功能

標簽:湖州 福州 衢州 紅河 西寧 宣城 西藏 岳陽

巨人網(wǎng)絡通訊聲明:本文標題《Ajax實現(xiàn)評論中頂和踩功能的實例代碼》,本文關(guān)鍵詞  Ajax,實現(xiàn),評論,中頂,和,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡,涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《Ajax實現(xiàn)評論中頂和踩功能的實例代碼》相關(guān)的同類信息!
  • 本頁收集關(guān)于Ajax實現(xiàn)評論中頂和踩功能的實例代碼的相關(guān)信息資訊供網(wǎng)民參考!
  • 企业400电话

    智能AI客服机器人
    15000

    在线订购

    合计11份范本:公司章程+合伙协议+出资协议+合作协议+股权转让协议+增资扩股协议+股权激励+股东会决议+董事会决议

    推薦文章