基于jquery實現ajax無刷新評論

發布于 2017-03-31 11:26:07 | 75 次閱讀 | 評論: 0 | 來源: 網友投遞

jQuery javascript框架jQuery是一個兼容多瀏覽器的javascript框架，核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國人John Resig在紐約的barcamp發布，吸引了來自世界各地的眾多JavaScript高手加入，由Dave Methvin率領團隊進行開發。

這篇文章主要為大家詳細介紹了基于jquery實現ajax無刷新評論的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

jquery實現ajax無刷新評論需要用的技術：(本次試驗用的是“jquery-1.4.2.js”版本的jquery)

$.post("一般處理程序路徑",{以字典的形式傳遞參數},function(data,status){``````});

jquery中的基本選擇器操作；

首先創建數據庫“T_article”：

主鍵設置自增；

然后創建一個強類型的DataSet。

接著創建一個“無刷新評論.aspx”頁面：

頁面代碼如下：

文章：

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!

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 = $("

用戶ID：" + line[0] + "； 評論內容：" + line[1] + "； 評論時間：" + line[2] + "");

$("#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 = $("

用戶ID：" + line[0] + "； 評論內容：" + line[1] + "； 評論時間：" + line[2] + "");

$("#pinglunlist").append(pinglun); //把最后一條評論追加到ul上

}

else {

alert("ajax錯誤！");

}

})

alert("評論成功！");

}

else {

alert("評論失敗！");

}

}

})

})

})

做完這些直接運行就可以了！

以上就是本文的全部內容，希望對大家的學習有所幫助。

相關閱讀:

基于jquery實現ajax無刷新評論

jQuery實現ajax無刷新分頁頁碼控件

jquery實現界面無刷新加載登陸注冊

基于jQuery實現Ajax驗證用戶名是否存在實例

jQuery實現form表單基于ajax無刷新提交方法詳解

jQuery+AJAX實現網頁無刷新上傳

基于jquery實現的省市區級聯無ajax

jQuery的ajax中使用FormData實現頁面無刷新上傳功能

基于jQuery的AJAX和JSON實現純html數據模板

招聘網站基于jQuery實現自動刷新簡歷

JQuery與JSon實現的無刷新分頁代碼

基于jQuery實現的Ajax 驗證用戶名是否存在的實現代碼

總結

以上是生活随笔為你收集整理的ajax无刷新留言板远吗,基于jquery实现ajax无刷新评论的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。