<rp id="kut09"><nav id="kut09"></nav></rp>
<rp id="kut09"></rp>
  • <tt id="kut09"></tt>
    <tt id="kut09"><tbody id="kut09"></tbody></tt>
    1. <u id="kut09"></u>
    2. <tt id="kut09"><noscript id="kut09"></noscript></tt>
    3. Ajax實現頁面無刷新留言效果

       更新時間:2020年12月21日 15:58:01   作者:A.香辣雞腿堡  
      這篇文章主要為大家詳細介紹了Ajax實現頁面無刷新留言效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

      利用Ajax實現頁面無刷新留言效果

      實現效果

      前言:在百度貼吧,以及一些論壇中,當你回復或者評論完畢之后,從來沒有見過頁面重新刷新加載的效果,那么這個究竟是怎么做成的呢,也就是利用Ajax技術,頁面無刷新效果,廢話不多說,直接上代碼。
      實現效果

      html部分:

       <div class="container">
       <h1 class="display-1">留言板</h1>
       <hr>
       <div id="loading">正在拼命加載數據.....</div>
       <ul id="messages" class="list-unstyled">
      
       </ul>
       <hr>
       <div class="form-group">
       <label for="txt_name">稱呼:</label>
       <input class="form-control" id="txt_name" name="xxx" type="text">
       </div>
       <div class="form-group">
       <label for="txt_content">留言:</label>
       <textarea class="form-control" id="txt_content" cols="80" rows="10"></textarea>
       </div>
       <button type="button" id="btn_send" class="btn btn-primary">提交</button>
      </div>

      css部分:

      css部分引用了bootstrap.css

      js部分:

      //———————————實現頁面初始化數據 Start———————————
      <script>
       //初始化,加載數據
       loadData();
       //獲取已經存在的數據,加載到頁面中
       /* 方式:GET 
       方法名: /getMsg
       參數:無
       返回: 所有留言[JSON] */
       function loadData() {
       //1.新建xhr 對象
       var xhr = new XMLHttpRequest();
       //2.設置請求參數和url
       xhr.open('GET', '/getMsg');
       //3.調用send方法 發送請求
       xhr.send();
       //4.接收一個參數 返回服務器的響應結構
       xhr.onload = function () {
       //JSON轉換成數組
       var arr = JSON.parse(this.response);
       //開始遍歷數組
       var str = '';
       arr.forEach(function (ele) {
        //將循環遍歷出來的拼接到到一個字符串中,
        str += `<li class="media">
         <img class="mr-3" src="avatar.png" alt=${ele.name}>
         <div class="media-body">
          <h4>${ele.name}</h4>
          <p>${ele.content}</p>
         </div>
         </li>`;
       });
       //獲取ul 將拼接的li 放置到ul 中
       var mes = document.getElementById('messages');
       mes.innerHTML = str;
       //清空默認顯示 拼命加載中
       if (mes.childNodes.length != 0) {
        //獲取拼命加載中id
        var loadMes = document.getElementById('loading');
        loadMes.innerHTML = "";
       }
       }
       }
       </script>
       //————————————實現頁面初始化數據 end————————
      
       //————————實現頁面添加留言功能 Start——————————
       <script>
       //添加一個發表留言的功能
       /* 
       方式:POST
       方法名:/addMsg 
       參數:name[string]
        content:[string]
       返回值:添加成功:true 
        添加失敗:false
       */
      
       //新增的方法
       //獲取提交按鈕
       var btn_send = document.getElementById("btn_send");
       btn_send.onclick = function () {
       //1.新建xhr 對象
       var xhr = new XMLHttpRequest();
       //2.設置請求參數和url
       xhr.open('POST', '/addMsg');
       //3.設置請求頭
       xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
       //獲取稱呼內容
       var txt_name = document.getElementById("txt_name");
       //獲取留言內容
       var txt_content = document.getElementById("txt_content");
       //4.調用send方法 發送請求
       xhr.send('name=' + txt_name.value + '&content= ' + txt_content.value);
       //5.接收一個參數 返回服務器的響應結構
       xhr.onload = function () {
       if (this.response === "true") {
        //添加完畢之后,重新加載
        loadData();
        //添加完畢之后清空輸入欄文本
        txt_name.value = txt_content.value = '';
       } else {
        alert("添加失敗");
       }
       }
       }
       </script>
       //——————————實現頁面添加留言功能 end————————————

      大概介紹就說到這里吧,有疑問的以及有好的想法的歡迎大家前來評論。

      以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

      相關文章

      最新評論

      218彩票 www.casaladerapv.com:肥西县| www.coutdev.com:中阳县| www.culasse-moteur.com:抚松县| www.bzwanhe.com:鄂州市| www.showbar8.com:延安市| www.weiyanwangluo.com:搜索| www.wx-culture.com:盱眙县| www.wonderfuldealspot.com:成安县| www.spielothekspiele.com:班玛县| www.s59uk.com:通江县| www.gotbadgeapp.com:利川市| www.snmp-thermometer.com:潮安县| www.tjhct.com:庆城县| www.biberhapisatinal.com:营山县| www.zzjinbowei.com:延寿县| www.eccacaceres.org:万安县| www.cx13800.com:弥勒县| www.rivalecanecorsos.com:横峰县| www.mfjcg.com:南雄市| www.radiosolmansi.org:天柱县| www.zhuoxun0769.com:铁岭县| www.kinostream.net:肃宁县| www.6969t.com:哈密市| www.yp-sport.com:彭阳县| www.steinblogger.com:广元市| www.agen66.com:周宁县| www.hiroshihawaii.com:中阳县| www.eslglobal.org:大新县| www.wwwhg8194.com:连云港市| www.cafeavec.com:兰坪| www.blackindianmusic.com:祁阳县| www.180xu.com:塘沽区| www.480378.com:林州市| www.suryamenterprises.com:安阳县| www.thethirtysix.net:开远市| www.lovejaniethien.com:双城市| www.ljseducation.com:随州市| www.addx-technologies.com:鄂温| www.guowangdewangguo.com:方城县| www.goibm.com:老河口市| www.szbaled.com:桑植县| www.aaaago.com:松溪县| www.troughtonmichael.com:舞阳县| www.charlescountytoday.com:临澧县| www.leopad.net:高平市| www.hellobuynow.com:右玉县| www.lauragottlieb.com:安西县| www.bustybarmaid.com:筠连县| www.hg38345.com:新安县| www.szmlde.com:虎林市| www.gqfxw.cn:合江县| www.90wlog.com:佛学| www.chinacheapshop.com:凤庆县| www.dualbux.com:图们市| www.hg43456.com:嵩明县| www.pf955.com:达拉特旗| www.matthiasgille.com:江达县| www.shank-tank.net:白河县| www.firmware-drivers.com:赣榆县| www.chasse-becasse-quebec-canada.com:凯里市| www.inkedcreatively.com:华池县| www.iqhausa.com:那坡县| www.cv62.com:余干县| www.calismdmrxonline.com:耒阳市| www.tryinghardminimalist.com:六枝特区| www.extrapolater.com:八宿县| www.mylisen.com:东山县| www.baiyunplaza.com:舒城县| www.aashbooksplus.com:东丰县| www.bluedragonservices.com:宽城| www.springmaidgarden.com:理塘县| www.yongbeikeji.cn:颍上县| www.zearchsd.com:德令哈市| www.paulovarelahairspace.com:定结县| www.tw-graphics.com:高邮市| www.jhjzqc.com:南阳市| www.apics-hawaii.org:彩票| www.tt-kk-ss.com:牙克石市| www.jbjt888.com:天门市| www.49yf.com:余干县| www.jhjxjgc.com:昌邑市| www.skillupnavi.com:海丰县| www.xczc1.com:涪陵区| www.valentinesday-poems.com:双柏县|