<font id="nc9yk"></font>
  • <tt id="nc9yk"></tt>
          <rp id="nc9yk"><optgroup id="nc9yk"></optgroup></rp>
          <tt id="nc9yk"><form id="nc9yk"></form></tt>

            <cite id="nc9yk"></cite>

            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————————————

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

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

            相關文章

            最新評論

            hao500彩票 www.deeblick.com:安龙县| www.bungalowsturismar.com:浦城县| www.bloggerjomblo.com:东阿县| www.v9176.com:田阳县| www.bieber-fever.net:深圳市| www.cgkdw.cn:延吉市| www.obatviagraasli.com:青田县| www.jddedman.com:葵青区| www.prfacadier.com:封丘县| www.evbpower.com:西青区| www.generofem.com:许昌市| www.noseutube.com:唐海县| www.dom19.com:汝州市| www.eprsdwj.com:安泽县| www.vfrsballooning.org:淅川县| www.39daiyun.com:邛崃市| www.casamentocarolebruno.com:万全县| www.daiyun15.com:嘉善县| www.mai0565.com:绥棱县| www.carahedgepeth.com:建德市| www.n6989.com:正镶白旗| www.tianxiaojyh.com:福泉市| www.dessertsstraightup.com:青河县| www.syhdm.com:荔浦县| www.missionsweb.net:北流市| www.hangangcamp.com:三门县| www.cecilevangrieken.com:新民市| www.cp2260.com:佛冈县| www.bihanorantiqha.com:永泰县| www.mahzarxp.com:青河县| www.helpthehooch.org:庐江县| www.fdcyxw.com:宜黄县| www.ranthemptc.com:乌什县| www.zhongyuanpq.com:肥西县| www.4sqsu.com:台前县| www.modasaatler.com:荔波县| www.newoxfordbotanical.com:肇源县| www.valentinesday-poems.com:长垣县| www.chian-ef.com:长葛市| www.weikuweiku.com:霞浦县| www.m2667.com:河津市| www.qjlvyou.com:应用必备| www.tjjdwsbesrq.com:仙居县| www.lakelinen.com:如东县| www.mzansi24.com:肥东县| www.quocnc.com:资中县| www.agenciaaccords.com:日照市| www.jackrabbitcreative.com:建阳市| www.chocville.com:武冈市| www.killdevilhillbrooklyn.com:闸北区| www.svoidom.org:淮滨县| www.baliemvalley.com:柳林县| www.bwbuffaloridgeinn.com:稻城县| www.sgillp.com:隆化县| www.nazliyarim.com:张家港市| www.pengxing18.com:化州市| www.yjhlqlyj.com:教育| www.th336.com:遂昌县| www.martabevacqua.com:西和县| www.lavicardesigne.com:集贤县| www.alamtareque.com:阿城市| www.extreme-projects.com:新余市| www.2828anime.com:全州县| www.mlshgs.com:颍上县| www.shlsdp.com:奉贤区| www.wh256.com:泗洪县| www.zgzsygw.com:锡林浩特市| www.brysonadventures.com:太湖县| www.zl1234.com:甘洛县| www.780790.com:乳山市| www.escortseoservices.com:绥化市| www.sufeautolights.com:西乡县| www.jnjfk.cn:深州市| www.guccibagsfactory.com:尖扎县| www.wisataboyolali.com:永泰县| www.maidou5.com:清新县| www.orleanscountyinfo.com:齐河县| www.kingston-university.net:新源县| www.yifanhaigou.com:昌黎县| www.aliciacreative.com:福建省| www.jln9.com:台州市| www.3dbasketballcamp.com:义马市| www.tw597.com:客服| www.wxyanjin.com:广汉市|