首先在數(shù)據(jù)庫(kù)中就建三個(gè)字段的表用來(lái)存儲(chǔ)用戶名和評(píng)論信息，Id只是為了設(shè)置唯一標(biāo)示，所以設(shè)置成整型自增字段就行了。
再建一個(gè)HTML頁(yè)面，只需簡(jiǎn)單的拉幾個(gè)html控件出來(lái)擺著就行，注意在頁(yè)面頂部有個(gè)table>標(biāo)簽用來(lái)占位輸出評(píng)論內(nèi)容。
Html頁(yè)面代碼就這樣簡(jiǎn)單就行了:
復(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>
然后再頁(yè)面剛加載的時(shí)候，需要從數(shù)據(jù)庫(kù)中顯示出已有的評(píng)論，所以建個(gè)后臺(tái)一般處理程序，命名為：bodyload.ashx。這個(gè)后臺(tái)處理程序就是讀取數(shù)據(jù)庫(kù)中的所有評(píng)論信息，加載到顯示頁(yè)面，當(dāng)然我這里只是簡(jiǎn)單的利用|標(biāo)記來(lái)區(qū)別每個(gè)用戶的評(píng)論，用@標(biāo)記來(lái)區(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 的摘要說(shuō)明
/// /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代碼在頁(yè)面加載時(shí)進(jìn)行讀取評(píng)論，這里就用到了JQuery中的AJAX了，其實(shí)也非常簡(jiǎn)單，就只是調(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] + "說(shuō)：/td>td>" + msg[1] + "/td>/tr>";
$("#room").append(res);
}
}
});
然后來(lái)處理每一次用戶輸入后的插入數(shù)據(jù)及在頁(yè)面無(wú)刷新更新顯示評(píng)論內(nèi)容，需要另外添加一個(gè)后臺(tái)處理一般程序，命名為：update.ashx，用來(lái)在后臺(tái)插入數(shù)據(jù)到數(shù)據(jù)庫(kù)中。
后臺(tái)處理代碼如下：
復(fù)制代碼 代碼如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using _20100921Web.DataSetMsgTableAdapters;
namespace _20100921Web
{
/// summary>
/// update 的摘要說(shuō)明
/// /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 + "說(shuō)：/td>td>" + msg + "/td>/tr>";
$("#room").append(res);
}
})
})
您可能感興趣的文章:- 基于jquery實(shí)現(xiàn)ajax無(wú)刷新評(píng)論
- C#使用jQuery實(shí)現(xiàn)無(wú)刷新評(píng)論提交的方法
- jquery 新浪網(wǎng)易的評(píng)論塊制作
- jquery實(shí)現(xiàn)仿新浪微博評(píng)論滾動(dòng)效果
- JQuery實(shí)現(xiàn)動(dòng)態(tài)添加刪除評(píng)論的方法
- PHP結(jié)合jQuery實(shí)現(xiàn)的評(píng)論頂、踩功能
- jQuery 實(shí)現(xiàn)評(píng)論等級(jí)好評(píng)差評(píng)特效
- jQuery實(shí)現(xiàn)頁(yè)面評(píng)論欄中訪客信息自動(dòng)填寫(xiě)功能的方法
- 利用jQuery實(shí)現(xiàn)WordPress中@的ID懸浮顯示評(píng)論內(nèi)容
- jQuery實(shí)現(xiàn)的簡(jiǎn)單無(wú)刷新評(píng)論功能示例
