快捷導(dǎo)航

Asp.net利用JQuery AJAX實(shí)現(xiàn)無刷新評(píng)論思路與代碼

更新時(shí)間：2012年12月30日 13:01:51 作者：

Asp.net利用JQuery AJAX實(shí)現(xiàn)無刷新評(píng)論,此功能是每一個(gè)從事asp.net開發(fā)者的朋友都希望實(shí)現(xiàn)的，本文利用閑暇時(shí)間整理了一些，有需要的朋友可以參考下

首先在數(shù)據(jù)庫中就建三個(gè)字段的表用來存儲(chǔ)用戶名和評(píng)論信息，Id只是為了設(shè)置唯一標(biāo)示，所以設(shè)置成整型自增字段就行了。

再建一個(gè)HTML頁面，只需簡單的拉幾個(gè)html控件出來擺著就行，注意在頁面頂部有個(gè)<table>標(biāo)簽用來占位輸出評(píng)論內(nèi)容。
Html頁面代碼就這樣簡單就行了:

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

 
<body><table id="room"> 
</table> 
<div> 
用戶名：<input id="Text1" type="text" /><br /> 
信息：<textarea id="TextArea1" cols="20" name="S1" rows="5"></textarea><br /> 
<input id="Button1" type="button" value="提交" /></div> 
</body> 

然后再頁面剛加載的時(shí)候，需要從數(shù)據(jù)庫中顯示出已有的評(píng)論，所以建個(gè)后臺(tái)一般處理程序，命名為：bodyload.ashx。這個(gè)后臺(tái)處理程序就是讀取數(shù)據(jù)庫中的所有評(píng)論信息，加載到顯示頁面，當(dāng)然我這里只是簡單的利用|標(biāo)記來區(qū)別每個(gè)用戶的評(píng)論，用@標(biāo)記來區(qū)分用戶名和信息，所以不是很嚴(yán)謹(jǐn)。數(shù)據(jù)操作使用的是強(qiáng)類型的DataSet
獲取所有評(píng)論信息后臺(tái)處理代碼如下：

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

 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using _20100921Web.DataSetMsgTableAdapters; 
using System.Text; 
namespace _20100921Web 
{ 
/// <summary> 
/// bodyload 的摘要說明 
/// </summary> 
public class bodyload : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
T_MsgTableAdapter adapter = new T_MsgTableAdapter(); 
StringBuilder sb = new StringBuilder(); 
DataSetMsg.T_MsgDataTable table = adapter.GetData(); 
foreach (var v in table) 
{ 
sb.Append(v.Username); 
sb.Append("@"); 
sb.Append(v.Message); 
sb.Append("|"); 
} 
String result = sb.ToString(); 
context.Response.Write(result); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
} 
} 

前臺(tái)調(diào)用JQuery代碼在頁面加載時(shí)進(jìn)行讀取評(píng)論，這里就用到了JQuery中的AJAX了，其實(shí)也非常簡單，就只是調(diào)用JQuery中的$.post()方法就可以實(shí)現(xiàn)了，該方法實(shí)質(zhì)還是調(diào)用了$.ajax()的方法。
前臺(tái)JQuery代碼如下：

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

 
$.post("bodyload.ashx", function (data, state) { 
if (state == "success") { 
var msgArr = data.split("|"); 
for (var i = 0; i < msgArr.length; i++) { 
if (msgArr[i].length == 0) { 
return; 
} 
var msg = msgArr[i].split("@"); 
var res = "<tr><td>" + msg[0] + "說：</td><td>" + msg[1] + "</td></tr>"; 
$("#room").append(res); 
} 
} 
}); 

然后來處理每一次用戶輸入后的插入數(shù)據(jù)及在頁面無刷新更新顯示評(píng)論內(nèi)容，需要另外添加一個(gè)后臺(tái)處理一般程序，命名為：update.ashx，用來在后臺(tái)插入數(shù)據(jù)到數(shù)據(jù)庫中。
后臺(tái)處理代碼如下：

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

 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using _20100921Web.DataSetMsgTableAdapters; 
namespace _20100921Web 
{ 
/// <summary> 
/// update 的摘要說明 
/// </summary> 
public class update : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
String username = context.Request["username"]; 
String msg = context.Request["msg"]; 
T_MsgTableAdapter adapter = new T_MsgTableAdapter(); 
adapter.Insert(username, msg); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
} 
} 

最后就是在前臺(tái)將數(shù)據(jù)傳到后臺(tái)插入，并將評(píng)論信息進(jìn)行更新：

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

 
$("#Button1").click(function () { 
var username = $("#Text1").val(); 
var msg = $("#TextArea1").text(); 
$.post("update.ashx", { "username": username, "msg": msg }, function (data, states) { 
if (states == "success") { 
var res = "<tr><td>" + username + "說：</td><td>" + msg + "</td></tr>"; 
$("#room").append(res); 
} 
}) 
}) 

您可能感興趣的文章: