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 相关文章推荐
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
JS实现520 表白简单代码
May 21 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
利用promise及参数解构封装ajax请求的方法
AJAX检测用户名是否存在的方法
Mar 24 #Javascript
js正则匹配markdown里的图片标签的实现
浅谈react路由传参的几种方式
Mar 23 #Javascript
一百多行代码实现react拖拽hooks
node中使用shell脚本的方法步骤
详解如何解决使用JSON.stringify时遇到的循环引用问题
You might like
PHP 文件系统详解
2012/09/13 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
浅谈Node 调试工具入门教程
2018/03/20 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
解析Python中的异常处理
2015/04/28 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
python里运用私有属性和方法总结
2019/07/08 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
党员公开承诺书和承诺事项
2014/03/25 职场文书
怎样填写就业意向
2014/04/02 职场文书
大学生个人学年总结
2015/02/15 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
Python保存并浏览用户的历史记录
2022/04/29 Python