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 相关文章推荐
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 Javascript
利用promise及参数解构封装ajax请求的方法
AJAX检测用户名是否存在的方法
Mar 24 #Javascript
js正则匹配markdown里的图片标签的实现
浅谈react路由传参的几种方式
Mar 23 #Javascript
一百多行代码实现react拖拽hooks
node中使用shell脚本的方法步骤
详解如何解决使用JSON.stringify时遇到的循环引用问题
You might like
php简单浏览目录内容的实现代码
2013/06/07 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
13个PHP函数超实用
2015/10/21 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
Angular的自定义指令以及实例
2016/12/26 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
python的常见命令注入威胁
2013/02/18 Python
python多线程http下载实现示例
2013/12/30 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
django中嵌套的try-except实例
2020/05/21 Python
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
财务管理专业推荐信
2013/11/19 职场文书
自我鉴定怎么写
2014/01/12 职场文书
九年级数学教学反思
2014/02/02 职场文书
志愿者活动总结
2014/04/28 职场文书
五心教育心得体会
2014/09/04 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
创先争优承诺书
2015/01/20 职场文书
春节慰问信范文
2015/02/15 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
python实现简单的三子棋游戏
2022/04/28 Python