jquery實現ajax無刷新評論需要用的技術：（本次試驗用的是“jquery-1.4.2.js”版本的jquery）
$.post("一般處理程序路徑",{以字典的形式傳遞參數},function(data,status){``````});
jquery中的基本選擇器操作；
首先創建數據庫“T_article”：
主鍵設置自增；
然后創建一個強類型的DataSet。
接著創建一個“無刷新評論.aspx”頁面：
頁面代碼如下：
<div> <h2>文章：</h2> <p>this a text!this a text!this a text!this a text!this a text!this a text!this a text!this a text! this a text!this a text!this a text!this a text!this a text!this a text!this a text!this a text!this a text! this a text!this a text!this a text!this a text!this a text!this a text!</p> <ul id="pinglunlist"> </ul> </div> <textarea id="msg" style="margin-left:20px;" cols="40" rows="10"></textarea> <input id="btnpinglun" type="button" value="評論" />
然后創建兩個一般處理程序WSXPL.ashx（用來插入數據的處理程序）和WSXPL1.ashx（用來獲取所有評論數據的處理程序）；
WSXPL.ashx中的代碼如下：
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string msg = context.Request["msg"]; new T_articleTableAdapter().Insert(context.Request.UserHostAddress, msg, DateTime.Now); //創建一個強類型的實例，然后調用Insert()函數插入； context.Response.Write("ok"); }WSXPL1.ashx中的代碼如下：
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; var datas = new T_articleTableAdapter().GetData(); //返回的是一個DataTable StringBuilder sb = new StringBuilder(); //創建StringBuilder更加方便的搜集數據 foreach (var data in datas) //用foreach方法遍歷DataTable {//實現字符串的拼接；每行數據用$隔開，每行數據的每個元素用|隔開；有利于前臺解析數據； sb.Append(data.ipaddress).Append("|").Append(data.msg).Append("|").Append(data.posttime).Append("$"); } context.Response.Write(sb); }做完這些步驟，操作數據庫的部分就已經完成了。現在只要在前臺把一般處理程序返回的數據解析一下并附加的相應的位置就可以了！
首先在前臺引用“jquery-1.4.2.js”jquery庫；然后開始編寫js腳本；
$(function () { $.post("WSXPL1.ashx", function (data, status) { //通過WSXPL1.ashx獲取所有的評論內容 if (status == "success") { var result = data.split("$"); //按照$分割字符串 for (var i = 0; i < result.length - 1; i++) { var msg = result[i]; var line = msg.split("|"); //按照|分割字符串 var pinglun = $("<li>用戶ID：" + line[0] + "； 評論內容：" + line[1] + "； 評論時間：" + line[2] + "</li>"); $("#pinglunlist").append(pinglun); //把得到的評論結果追加到ul元素上 } } else { alert("ajax錯誤！"); } }) $("#btnpinglun").click(function () { //設置btn事件 var msg = $("#msg").val(); $.post("ashx/WSXPL.ashx", { "msg": msg }, function (data, status) { if (status == "success") { if (data == "ok") { $.post("WSXPL1.ashx", function (data, status) { //為了實現評論的時候評論內容會自動的添加到ul上 if (status == "success") { var result = data.split("$"); var msg = result[result.length - 2]; //獲取最后一條評論 var line = msg.split("|"); var pinglun = $("<li>用戶ID：" + line[0] + "； 評論內容：" + line[1] + "； 評論時間：" + line[2] + "</li>"); $("#pinglunlist").append(pinglun); //把最后一條評論追加到ul上 } else { alert("ajax錯誤！"); } }) alert("評論成功！"); } else { alert("評論失??！"); } } }) }) })做完這些直接運行就可以了！
以上就是本文的全部內容，希望對大家的學習有所幫助。
新聞熱點
疑難解答
