Ajax實現頁面無重新整理留言效果
阿新 • • 發佈:2020-12-23
利用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————————————
大概介紹就說到這裡吧,有疑問的以及有好的想法的歡迎大家前來評論
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。