<tt id="eol1w"></tt>
  • 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————————————

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

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

    相關文章

    最新評論

    盈利国际彩票 www.southerncrossnat.com:东乡| www.gparkin.com:永顺县| www.curso-endodoncia.com:合川市| www.meujp.com:桃园市| www.aboutren.com:格尔木市| www.appleidd.com:连云港市| www.cp6779.com:宁武县| www.x1900.com:彰化县| www.tjskexin.com:咸宁市| www.jacobswelldrilling.net:社旗县| www.solarisband.com:衡阳县| www.uggboots999.com:陇南市| www.myqccoupons.com:左云县| www.prfacadier.com:大余县| www.15590742199.com:汽车| www.helpthehooch.org:扎赉特旗| www.cp6990.com:高邮市| www.zone416.com:池州市| www.northcountybjj.com:米林县| www.bpgpd.com:藁城市| www.blimprobotics.com:南和县| www.zrh6.com:庆安县| www.ditr-inc.com:玉林市| www.brosway-gioielli-it.com:六枝特区| www.czxinlai.com:宣武区| www.ikemax.com:成都市| www.bestjav4you.com:永登县| www.corpicontusi.com:公主岭市| www.jsxysp.com:彩票| www.cheabc168.com:广元市| www.isi-stone.com:南陵县| www.tcga4u.org:永仁县| www.jaydenmall.com:湖北省| www.kingbcw.com:新宁县| www.merginnhotel.com:莱西市| www.110df.com:绵竹市| www.bluedragonservices.com:长春市| www.non-league.net:临泉县| www.zhongchentebao.com:岗巴县| www.cg955.com:霞浦县| www.yuezhan88.com:禹城市| www.zybrickmachine.com:保康县| www.noseutube.com:吉首市| www.switchgeardubai.net:石渠县| www.firden.com:英山县| www.lvchuanhuanbao.com:淮安市| www.pret-pas-cher.com:额济纳旗| www.szjiaoyuzhan.com:达日县| www.uberdrivingparttime.com:翁牛特旗| www.py556.com:深州市| www.belle1.com:资阳市| www.yakkk.com:庄河市| www.guokejx.com:香格里拉县| www.india-watch.com:兴仁县| www.bwpha.com:故城县| www.acadiespatiale.com:郸城县| www.gunungpoker.org:凤山市| www.beverlysteelasia.com:响水县| www.appliancechina.com:大关县| www.zen-moa-massage.com:正蓝旗| www.motonitro.com:塔河县| www.hghx.org:东乌珠穆沁旗| www.zuluanimazione.com:光山县| www.cosmosofsweden.com:芦溪县| www.stefanie-scott.org:无锡市| www.78iis.com:汉中市| www.hg94678.com:日土县| www.tech133.com:简阳市| www.ltswordpress.com:英山县| www.hbhunyin.com:突泉县| www.china-jjyp.com:海原县| www.dreamleadership.org:襄樊市| www.178host.com:佛坪县| www.hongxinyu888.com:项城市| www.oranjebastion.org:秦皇岛市| www.crucerocapitalesbalticas.com:临西县| www.03181717.com:孟津县| www.wonderfuldealspot.com:永清县| www.whatschimp.com:汪清县| www.ontwolegs.com:桑植县| www.borealmatters.org:麻江县| www.suixicom.com:兴宁市| www.jigoloturkiye.net:大邑县| www.cdhdlgs.com:珲春市|