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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
利用json获取字符出现次数的代码
Mar 22 Javascript
JS多物体 任意值 链式 缓冲运动
Aug 10 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
利用promise及参数解构封装ajax请求的方法
AJAX检测用户名是否存在的方法
Mar 24 #Javascript
js正则匹配markdown里的图片标签的实现
浅谈react路由传参的几种方式
Mar 23 #Javascript
一百多行代码实现react拖拽hooks
node中使用shell脚本的方法步骤
详解如何解决使用JSON.stringify时遇到的循环引用问题
You might like
php中用foreach来操作数组的代码
2011/07/17 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
python常见数制转换实例分析
2015/05/09 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
Django logging配置及使用详解
2019/07/23 Python
Django 返回json数据的实现示例
2020/03/05 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
感恩母亲节演讲稿
2014/05/07 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
民族精神月活动总结
2014/08/28 职场文书
英文感谢信格式
2015/01/21 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
Vue实现下拉加载更多
2021/05/09 Vue.js
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL