基於jquery實現ajax無重新整理評論_jquery

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("評論失敗！");            }          }        })      })    })

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