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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 Javascript
利用promise及参数解构封装ajax请求的方法
AJAX检测用户名是否存在的方法
Mar 24 #Javascript
js正则匹配markdown里的图片标签的实现
浅谈react路由传参的几种方式
Mar 23 #Javascript
一百多行代码实现react拖拽hooks
node中使用shell脚本的方法步骤
详解如何解决使用JSON.stringify时遇到的循环引用问题
You might like
业余方法DIY电子管FM收音机
2021/03/02 无线电
一个PHP数组应该有多大的分析
2009/07/30 PHP
php 接口类与抽象类的实际作用
2009/11/26 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
Python深入学习之特殊方法与多范式
2014/08/31 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
Python计算信息熵实例
2020/06/18 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
python如何修改文件时间属性
2021/02/05 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
老师自我鉴定范文
2013/12/25 职场文书
小学后勤管理制度
2014/01/14 职场文书
员工旷工检讨书
2015/08/15 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
MyBatis 动态SQL全面详解
2021/10/05 MySQL
Python时间操作之pytz模块使用详解
2022/06/14 Python