欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于jquery實(shí)現(xiàn)ajax無(wú)刷新評(píng)論

 更新時(shí)間:2020年08月19日 11:49:35   作者:net小伙  
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)ajax無(wú)刷新評(píng)論的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考

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í)有所幫助。

相關(guān)文章

  • 10款新鮮出爐的 jQuery 插件(Ajax 插件,有幻燈片、圖片畫(huà)廊、菜單等)

    10款新鮮出爐的 jQuery 插件(Ajax 插件,有幻燈片、圖片畫(huà)廊、菜單等)

    這篇文章與大家分享的是10款新鮮出爐的基于 jQuery 開(kāi)發(fā)的 Ajax 插件,有幻燈片、圖片畫(huà)廊、菜單等很多有用的插件。這些作者的想法特別新穎,希望你能從中找到自己需要的插件。
    2011-06-06
  • jqueryMobile使用示例分享

    jqueryMobile使用示例分享

    這里是本人學(xué)習(xí)jQuery Mobile的過(guò)程,現(xiàn)在將學(xué)習(xí)過(guò)程中的實(shí)例一一展現(xiàn)出來(lái),希望能幫到更多的新手。本系列中實(shí)例都經(jīng)過(guò)了本人的親自測(cè)試。
    2016-01-01
  • jQuery is()函數(shù)用法3例

    jQuery is()函數(shù)用法3例

    這篇文章主要介紹了jQuery is()函數(shù)用法3例,jQuery的is()函數(shù)其實(shí)是非常有用的,能不能用好直接決定你的代碼是否高效,需要的朋友可以參考下
    2014-05-05
  • jQuery實(shí)現(xiàn)的淡入淡出圖片輪播效果示例

    jQuery實(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 本特效插件和教程

    今天這篇文章向大家分享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示例代碼

    實(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)代碼

    簡(jiǎn)單的jquery拖拽排序效果實(shí)現(xiàn)代碼

    寫(xiě)了簡(jiǎn)單的跟隨鼠標(biāo)移動(dòng)效果。這個(gè)拖拽排序的效果的區(qū)別在于: 運(yùn)用了插入insertBefore 和 insertAfter 的方法
    2011-09-09
  • jQuery樹(shù)形下拉菜單特效代碼分享

    jQuery樹(shù)形下拉菜單特效代碼分享

    這篇文章主要介紹了jQuery實(shí)現(xiàn)幻樹(shù)形下拉菜單特效,代碼簡(jiǎn)單,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-08-08
  • 一文帶你詳細(xì)了解jQuery

    一文帶你詳細(xì)了解jQuery

    jQuery是一個(gè)JavaScript庫(kù),它簡(jiǎn)化了客戶(hù)端JavaScript編程的過(guò)程,特別是針對(duì)HTML文檔遍歷和操作、事件處理、動(dòng)畫(huà)效果和Ajax操作。感興趣的小伙伴可以參考閱讀
    2023-04-04
  • jquery操作checkbox實(shí)現(xiàn)全選和取消全選

    jquery操作checkbox實(shí)現(xiàn)全選和取消全選

    這篇文章主要介紹了jquery操作checkbox實(shí)現(xiàn)全選和取消全選,需要的朋友可以參考下
    2014-05-05

最新評(píng)論