首先在數(shù)據庫中就建三個字段的表用來存儲用戶名和評論信息，Id只是為了設置唯一標示，所以設置成整型自增字段就行了。
再建一個HTML頁面，只需簡單的拉幾個html控件出來擺著就行，注意在頁面頂部有個table>標簽用來占位輸出評論內容。
Html頁面代碼就這樣簡單就行了:
復制代碼 代碼如下:
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ù)據庫中顯示出已有的評論，所以建個后臺一般處理程序，命名為：bodyload.ashx。這個后臺處理程序就是讀取數(shù)據庫中的所有評論信息，加載到顯示頁面，當然我這里只是簡單的利用|標記來區(qū)別每個用戶的評論，用@標記來區(qū)分用戶名和信息，所以不是很嚴謹。數(shù)據操作使用的是強類型的DataSet
獲取所有評論信息后臺處理代碼如下：
復制代碼 代碼如下:
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;
}
}
}
}
前臺調用JQuery代碼在頁面加載時進行讀取評論，這里就用到了JQuery中的AJAX了，其實也非常簡單，就只是調用JQuery中的$.post()方法就可以實現(xiàn)了，該方法實質還是調用了$.ajax()的方法。
前臺JQuery代碼如下：
復制代碼 代碼如下:
$.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ù)據及在頁面無刷新更新顯示評論內容，需要另外添加一個后臺處理一般程序，命名為：update.ashx，用來在后臺插入數(shù)據到數(shù)據庫中。
后臺處理代碼如下：
復制代碼 代碼如下:
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;
}
}
}
}
最后就是在前臺將數(shù)據傳到后臺插入，并將評論信息進行更新：
復制代碼 代碼如下:
$("#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);
}
})
})
您可能感興趣的文章:- 基于jquery實現(xiàn)ajax無刷新評論
- C#使用jQuery實現(xiàn)無刷新評論提交的方法
- jquery 新浪網易的評論塊制作
- jquery實現(xiàn)仿新浪微博評論滾動效果
- JQuery實現(xiàn)動態(tài)添加刪除評論的方法
- PHP結合jQuery實現(xiàn)的評論頂、踩功能
- jQuery 實現(xiàn)評論等級好評差評特效
- jQuery實現(xiàn)頁面評論欄中訪客信息自動填寫功能的方法
- 利用jQuery實現(xiàn)WordPress中@的ID懸浮顯示評論內容
- jQuery實現(xiàn)的簡單無刷新評論功能示例
