基于jquery實現(xiàn)ajax無刷新評論

更新時間：2020年08月19日 11:49:35 作者：net小伙

這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)ajax無刷新評論的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考

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

$.post("一般處理程序路徑",{以字典的形式傳遞參數(shù)},function(data,status){``````});
jquery中的基本選擇器操作；

首先創(chuàng)建數(shù)據(jù)庫“T_article”：

主鍵設置自增；

然后創(chuàng)建一個強類型的DataSet。

接著創(chuàng)建一個“無刷新評論.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="評論" />

然后創(chuàng)建兩個一般處理程序WSXPL.ashx（用來插入數(shù)據(jù)的處理程序）和WSXPL1.ashx（用來獲取所有評論數(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)建一個強類型的實例，然后調用Insert()函數(shù)插入；
   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(); //創(chuàng)建StringBuilder更加方便的搜集數(shù)據(jù)
   foreach (var data in datas)  //用foreach方法遍歷DataTable
   {//實現(xiàn)字符串的拼接；每行數(shù)據(jù)用$隔開，每行數(shù)據(jù)的每個元素用|隔開；有利于前臺解析數(shù)據(jù)；
    sb.Append(data.ipaddress).Append("|").Append(data.msg).Append("|").Append(data.posttime).Append("$");
   }
   context.Response.Write(sb);
  }

做完這些步驟，操作數(shù)據(jù)庫的部分就已經完成了?，F(xiàn)在只要在前臺把一般處理程序返回的數(shù)據(jù)解析一下并附加的相應的位置就可以了！

首先在前臺引用“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) { //為了實現(xiàn)評論的時候評論內容會自動的添加到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("評論失??！");
      }
     }
    })

   })
  })

做完這些直接運行就可以了！
以上就是本文的全部內容，希望對大家的學習有所幫助。

您可能感興趣的文章: