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

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

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

jquery中的基本選擇器操作；

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

主鍵設(shè)置自增；

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

接著創(chuàng)建一個(gè)“無刷新評論.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)建兩個(gè)一般處理程序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)建一個(gè)強(qiáng)類型的實(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ù)用$隔開，每行數(shù)據(jù)的每個(gè)元素用|隔開；有利于前臺解析數(shù)據(jù)；

    sb.Append(data.ipaddress).Append("|").Append(data.msg).Append("|").Append(data.posttime).Append("$");

  }

  context.Response.Write(sb);

}

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

首先在前臺引用“jquery-1.4.2.js”jquery庫；然后開始編寫js腳本；

$(function () {

      $.post("WSXPL1.ashx", function (data, status) { //通過WSXPL1.ashx獲取所有的評論內(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>用戶ID：" + line[0] + "； 評論內(nèi)容：" + line[1] + "； 評論時(shí)間：" + line[2] + "</li>");

            $("#pinglunlist").append(pinglun); //把得到的評論結(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)評論的時(shí)候評論內(nèi)容會自動(dòng)的添加到ul上

                if (status == "success") {

                  var result = data.split("$");

                  var msg = result[result.length - 2];    //獲取最后一條評論

                  var line = msg.split("|");

                  var pinglun = $("<li>用戶ID：" + line[0] + "； 評論內(nèi)容：" + line[1] + "； 評論時(shí)間：" + line[2] + "</li>");

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

                }

                else {

                  alert("ajax錯(cuò)誤！");

                }

              })

              alert("評論成功！");

            }

            else {

              alert("評論失?。?);

            }

          }

        })

      })

    })

做完這些直接運(yùn)行就可以了！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。