基于jquery實(shí)現(xiàn)ajax無(wú)刷新評(píng)論
jquery實(shí)現(xiàn)ajax無(wú)刷新評(píng)論需要用的技術(shù):(本次試驗(yàn)用的是“jquery-1.4.2.js”版本的jquery)
$.post("一般處理程序路徑",{以字典的形式傳遞參數(shù)},function(data,status){``````});
jquery中的基本選擇器操作;
首先創(chuàng)建數(shù)據(jù)庫(kù)“T_article”:
主鍵設(shè)置自增;
然后創(chuàng)建一個(gè)強(qiáng)類(lèi)型的DataSet。
接著創(chuàng)建一個(gè)“無(wú)刷新評(píng)論.aspx”頁(yè)面:
頁(yè)面代碼如下:
<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="評(píng)論" />
然后創(chuàng)建兩個(gè)一般處理程序WSXPL.ashx(用來(lái)插入數(shù)據(jù)的處理程序)和WSXPL1.ashx(用來(lái)獲取所有評(píng)論數(shù)據(jù)的處理程序);
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); //創(chuàng)建一個(gè)強(qiáng)類(lèi)型的實(shí)例,然后調(diào)用Insert()函數(shù)插入; context.Response.Write("ok"); }
WSXPL1.ashx中的代碼如下:
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; var datas = new T_articleTableAdapter().GetData(); //返回的是一個(gè)DataTable StringBuilder sb = new StringBuilder(); //創(chuàng)建StringBuilder更加方便的搜集數(shù)據(jù) foreach (var data in datas) //用foreach方法遍歷DataTable {//實(shí)現(xiàn)字符串的拼接;每行數(shù)據(jù)用$隔開(kāi),每行數(shù)據(jù)的每個(gè)元素用|隔開(kāi);有利于前臺(tái)解析數(shù)據(jù); sb.Append(data.ipaddress).Append("|").Append(data.msg).Append("|").Append(data.posttime).Append("$"); } context.Response.Write(sb); }
做完這些步驟,操作數(shù)據(jù)庫(kù)的部分就已經(jīng)完成了?,F(xiàn)在只要在前臺(tái)把一般處理程序返回的數(shù)據(jù)解析一下并附加的相應(yīng)的位置就可以了!
首先在前臺(tái)引用“jquery-1.4.2.js”jquery庫(kù);然后開(kāi)始編寫(xiě)js腳本;
$(function () { $.post("WSXPL1.ashx", function (data, status) { //通過(guò)WSXPL1.ashx獲取所有的評(píng)論內(nèi)容 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>用戶(hù)ID:" + line[0] + "; 評(píng)論內(nèi)容:" + line[1] + "; 評(píng)論時(shí)間:" + line[2] + "</li>"); $("#pinglunlist").append(pinglun); //把得到的評(píng)論結(jié)果追加到ul元素上 } } else { alert("ajax錯(cuò)誤!"); } }) $("#btnpinglun").click(function () { //設(shè)置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) { //為了實(shí)現(xiàn)評(píng)論的時(shí)候評(píng)論內(nèi)容會(huì)自動(dòng)的添加到ul上 if (status == "success") { var result = data.split("$"); var msg = result[result.length - 2]; //獲取最后一條評(píng)論 var line = msg.split("|"); var pinglun = $("<li>用戶(hù)ID:" + line[0] + "; 評(píng)論內(nèi)容:" + line[1] + "; 評(píng)論時(shí)間:" + line[2] + "</li>"); $("#pinglunlist").append(pinglun); //把最后一條評(píng)論追加到ul上 } else { alert("ajax錯(cuò)誤!"); } }) alert("評(píng)論成功!"); } else { alert("評(píng)論失敗!"); } } }) }) })
做完這些直接運(yùn)行就可以了!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- jquery 新浪網(wǎng)易的評(píng)論塊制作
- jquery實(shí)現(xiàn)仿新浪微博評(píng)論滾動(dòng)效果
- jQuery實(shí)現(xiàn)的簡(jiǎn)單無(wú)刷新評(píng)論功能示例
- jQuery 實(shí)現(xiàn)評(píng)論等級(jí)好評(píng)差評(píng)特效
- JQuery實(shí)現(xiàn)動(dòng)態(tài)添加刪除評(píng)論的方法
- PHP結(jié)合jQuery實(shí)現(xiàn)的評(píng)論頂、踩功能
- jQuery基于ajax實(shí)現(xiàn)星星評(píng)論代碼
- C#使用jQuery實(shí)現(xiàn)無(wú)刷新評(píng)論提交的方法
- 基于jQuery實(shí)現(xiàn)的美觀星級(jí)評(píng)論打分組件代碼
- jQuery實(shí)現(xiàn)簡(jiǎn)單評(píng)論區(qū)
相關(guān)文章
10款新鮮出爐的 jQuery 插件(Ajax 插件,有幻燈片、圖片畫(huà)廊、菜單等)
這篇文章與大家分享的是10款新鮮出爐的基于 jQuery 開(kāi)發(fā)的 Ajax 插件,有幻燈片、圖片畫(huà)廊、菜單等很多有用的插件。這些作者的想法特別新穎,希望你能從中找到自己需要的插件。2011-06-06jQuery實(shí)現(xiàn)的淡入淡出圖片輪播效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的淡入淡出圖片輪播效果,涉及jQuery基于定時(shí)器的頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08精心挑選的15款優(yōu)秀jQuery 本特效插件和教程
今天這篇文章向大家分享15款精心挑選的優(yōu)秀 jQuery 文本特效插件,都帶有詳細(xì)的使用教程。jQuery 是最流行和使用最廣泛的 JavaScript 框架,它簡(jiǎn)化了 HTML 文檔遍歷,事件處理,動(dòng)畫(huà)以及Ajax交互,幫助 Web 開(kāi)發(fā)人員更快速的實(shí)現(xiàn)各種精美的界面效果2012-08-08實(shí)用的Jquery選項(xiàng)卡TAB示例代碼
Jquery選項(xiàng)卡想必大家并不陌生,本文為大家介紹個(gè)比較實(shí)用的jquery TAB選項(xiàng)卡,喜歡的朋友可以學(xué)習(xí)下2013-08-08簡(jiǎn)單的jquery拖拽排序效果實(shí)現(xiàn)代碼
寫(xiě)了簡(jiǎn)單的跟隨鼠標(biāo)移動(dòng)效果。這個(gè)拖拽排序的效果的區(qū)別在于: 運(yùn)用了插入insertBefore 和 insertAfter 的方法2011-09-09jquery操作checkbox實(shí)現(xiàn)全選和取消全選
這篇文章主要介紹了jquery操作checkbox實(shí)現(xiàn)全選和取消全選,需要的朋友可以參考下2014-05-05