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 相关文章推荐
一个js写的日历(代码部分网摘)
Sep 20 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 Javascript
vue实现验证用户名是否可用
Jan 20 Vue.js
利用promise及参数解构封装ajax请求的方法
AJAX检测用户名是否存在的方法
Mar 24 #Javascript
js正则匹配markdown里的图片标签的实现
浅谈react路由传参的几种方式
Mar 23 #Javascript
一百多行代码实现react拖拽hooks
node中使用shell脚本的方法步骤
详解如何解决使用JSON.stringify时遇到的循环引用问题
You might like
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
js 居中漂浮广告
2010/03/21 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
js实现随机点名功能
2020/12/23 Javascript
Python使用django获取用户IP地址的方法
2015/05/11 Python
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
pyqt5中动画的使用详解
2020/04/01 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
HTML5标签使用方法详解
2015/11/27 HTML / CSS
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
文员岗位职责
2013/11/09 职场文书
中学生期末评语
2014/02/03 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
违纪检讨书范文
2015/01/27 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
爱护环境建议书
2015/09/14 职场文书