<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.borscon-de4.com:汽车| www.jwbzf.com:通榆县| www.hirdavatciyiz.com:和龙市| www.bikeleads.com:贵州省| www.638890.com:南江县| www.bumibuana.com:郁南县| www.tlhsny.com:司法| www.relationshipbreakp.com:镇原县| www.parcfrankston.com:牟定县| www.youthsportsfinder.com:义马市| www.beijingshengbo.com:栖霞市| www.saybelfld.com:乃东县| www.dlbdl.com:宣城市| www.dbxing.com:廉江市| www.cs366.com:天祝| www.versign-grs.com:富锦市| www.lucky-sevens.com:岚皋县| www.142126.com:涿鹿县| www.compassionhealing.com:隆昌县| www.r3989.com:区。| www.cantastorie05.com:武平县| www.guowangdewangguo.com:镇雄县| www.9e-9e.com:玛多县| www.ynsh9188.com:卢龙县| www.szmm120.com:黄浦区| www.buchuebersetzungen.com:白城市| www.jsghz.com:沂源县| www.d3mm.com:司法| www.jacobswelldrilling.net:美姑县| www.q420gb.com:英山县| www.house-of-jorob.com:于都县| www.83-bits.com:岗巴县| www.mfwwn.com:吐鲁番市| www.cdzhyz.com:桃园县| www.cocina-online.net:水城县| www.sp533.com:辽宁省| www.zybolimian888.com:韩城市| www.carrentalhurghada.com:驻马店市| www.racetorecoverynow.org:吉林省| www.jpgdu.com:建阳市| www.051b.com:天柱县| www.yushan-li.com:桓仁| www.gx-dg.com:元谋县| www.house-of-jorob.com:温宿县| www.xijiufuheban.com:阿坝| www.listensoulution.com:密云县| www.jnlezuo.com:石河子市| www.jiajudianqi.com:苗栗县| www.wzsghm.com:唐海县| www.wenledu.com:兰州市| www.foodboxmenu.com:福清市| www.nmmialumni-abq.com:北安市| www.libertytechs.com:卓资县| www.taxi053.com:尼勒克县| www.novowoodworks.com:理塘县| www.layersnet.com:绩溪县| www.kecsd.com:井研县| www.sz-jxbjb.com:上饶县| www.sazedejar.com:皋兰县| www.kmsrmall.com:枞阳县| www.88888888666666.cn:海原县| www.yizhed.com:衡山县| www.hg29789.com:青神县| www.gxsgx.com:曲麻莱县| www.non-league.net:龙江县| www.anjiutea.com:延吉市| www.avtomationline.net:建宁县| www.esqqw.com:天等县| www.fw355.com:仪陇县| www.acssecuritygroup.com:丁青县| www.boutiquenergizhotel.com:洮南市| www.kingandqueenspapa.com:海伦市| www.tgase.com:吕梁市| www.guajitouzhu.com:余姚市| www.yctcg.cn:大同市| www.kidizzle.com:永州市| www.cp2776.com:陈巴尔虎旗| www.nigerianminers.org:武安市| www.rightics.com:花垣县| www.cccasas.com:榆社县| www.editions-nergal.com:湾仔区| www.dachadian.com:长海县| www.illusionsandreality.com:永胜县| www.jlkyp.com:益阳市|