利用Ajax實(shí)現(xiàn)頁面無刷新留言效果

實(shí)現(xiàn)效果

前言：在百度貼吧，以及一些論壇中，當(dāng)你回復(fù)或者評(píng)論完畢之后，從來沒有見過頁面重新刷新加載的效果，那么這個(gè)究竟是怎么做成的呢，也就是利用Ajax技術(shù)，頁面無刷新效果，廢話不多說，直接上代碼。
實(shí)現(xiàn)效果

html部分：

 <div> <h1>留言板</h1> <hr> <div id="loading">正在拼命加載數(shù)據(jù).....</div> <ul id="messages"> </ul> <hr> <div> <label for="txt_name">稱呼：</label> <input id="txt_name" name="xxx" type="text"> </div> <div> <label for="txt_content">留言：</label> <textarea id="txt_content" cols="80" rows="10"></textarea> </div> <button type="button" id="btn_send">提交</button></div>

css部分：

css部分引用了bootstrap.css

js部分：

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

大概介紹就說到這里吧，有疑問的以及有好的想法的歡迎大家前來評(píng)論。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持。