Ajax实现页面无刷新留言效果

在百度贴吧,以及一些论坛中,当你回复或者评论完毕之后,从来没有见过页面重新刷新加载的效果,那么这个究竟是怎么做成的呢,也就是利用Ajax技术,页面无刷新效果,废话不多说,直接上代码。

Posted in Javascript onMarch 24, 2021

实现效果

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

 

Javascript 相关文章推荐
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
利用promise及参数解构封装ajax请求的方法
AJAX检测用户名是否存在的方法
Mar 24 #Javascript
js正则匹配markdown里的图片标签的实现
浅谈react路由传参的几种方式
Mar 23 #Javascript
一百多行代码实现react拖拽hooks
node中使用shell脚本的方法步骤
详解如何解决使用JSON.stringify时遇到的循环引用问题
You might like
php入门小知识
2008/03/24 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
jquery select选中的一个小问题
2009/10/11 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
微信小程序组件传值图示过程详解
2019/07/31 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
python实现复制整个目录的方法
2015/05/12 Python
Python ldap实现登录实例代码
2016/09/30 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
深入理解Django-Signals信号量
2019/02/19 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
机电专业大学生求职信
2013/10/04 职场文书
应聘自荐信
2013/12/14 职场文书
买房子个人收入证明
2014/01/16 职场文书
工作自我评价怎么写
2014/01/29 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
会计学自荐信
2014/06/03 职场文书
个人收入证明范本
2014/09/18 职场文书
写给父母的感谢信
2015/01/22 职场文书
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers