基於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>

 

效果：

 

圖片分享：