Ajax实现页面无刷新留言效果

利用Ajax实现页面无刷新留言效果

实现效果

前言:在百度贴吧,以及一些论坛中,当你回复或者评论完毕之后,从来没有见过页面重新刷新加载的效果,那么这个究竟是怎么做成的呢,也就是利用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————————————

大概介绍就说到这里吧,有疑问的以及有好的想法的欢迎大家前来评论

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 一个简单的ASP+AJAX留言本源码下载

    今天在网上看到一位叫"天下无双"的网友写的留言本,其中有些功能很不错哦!比如"插入运行代码","复制代码".... 本地下载

  • 找到一款不错的基于AJAX留言板源码(PHP版、ASP版)提供下载了

    一.说明 大家好,现将51AJAX的留言板源码放出,有PHP和ASP两个版本. PHP版基于AJAX+PHP4.3+MySql 4.1+Dojo 0.3,ASP版基于AJAX+ASP+Access+Dojo 0.3. 压缩包中已包含了Dojo框架的主文件dojo.js,无需再下载Dojo包: 要下载完整的Dojo框架,请点击这里下载:http://download.dojotoolkit.org/release-0.3.1/dojo-0.3.1-ajax.zip. 关于Dojo的更多信息,请点击

  • 本人ajax留言板的源程序 不错的应用js

    复制代码 代码如下: // JavaScript Document function $(id) {     return document.getElementById(id);     } function echo(obj,html) {     $(obj).innerHTML=html; } function fopen(obj) {     $(obj).style.display=""; } function fclose(obj) {     $(obj).style.

  • Ajax留言本源码 提供下载了

    本来不打算把这个源码放上来了,毕竟很久了,而且一直也都没有完善,可是发现还有很多网友给俺要这代码,俺这个人又是个懒人,不想一个个用Email发过去,于是乎就搬到偶Blog上了,如果大家喜欢,自己下便可以了! 这个留言本完全是出于自己对技术的学习和实践而做,仅供技术交流与学习之用.功能不完善,并不能真正应用到时间的项目中(尽管偶发现有人用这个留言本,汗一个!),留言本目前只包括留言功能,没有管理员的回复和 删除留言功能. 简要介绍: 1.留言页面无刷新,留言后自动更新查看留言区的内容. 2.留言内

  • xajax写的留言本

    <?  session_start();  require_once("../conn/mysqlconn.php");  require_once('xajax.inc.php');  if(!isset($_SESSION['wid']))  {  $_SESSION['wid']=$_GET["wid"];  }  if(isset($_POST['content_4']))  {   $con = new createdb;   $con->cr

  • Ajax在线提交留言并实时显示的js代码[修正版]

    学习Ajax提交的朋友,不妨参考一下吧,从中你会明白一些技巧吧. 因代码本身的问题,我们已经修正,欢迎大家测试. Ajax留言本 * { padding: 0; margin: 0; } li { list-style: none; } body { background: #f9f9f9; font-size: 14px; } #explain { height: 60px; border-bottom: 1px solid #999999; background: #eee; font-si

  • Smarty结合Ajax实现无刷新留言本实例

    看了标题你也许要说,留言本,很基本的东东啊!谁不会啊,还要用Smarty,这不找累吗?别急,我要表达的是一种编程的思想和结构,而不是证明我做的东西多有意义,通过它相信对初学者学习Smarty和ajax有些启发.原本用ajax做的,可惜始终调试不成功,只好用手写JS来弄了,不过不要紧,还是有一定价值的.站点结构大家下了源代码自己看,代码不长,应该不会看烦^_^,听我慢慢道来.     现在都PHP5了OO(面向对象)很流行了都,这里也不错过,首先来看下我们用OO来实现数据库操作和连接:[php]<

  • Ajax实现页面无刷新留言效果

    利用Ajax实现页面无刷新留言效果 实现效果 前言:在百度贴吧,以及一些论坛中,当你回复或者评论完毕之后,从来没有见过页面重新刷新加载的效果,那么这个究竟是怎么做成的呢,也就是利用Ajax技术,页面无刷新效果,废话不多说,直接上代码. 实现效果 html部分: <div class="container"> <h1 class="display-1">留言板</h1> <hr> <div id="loa

  • PHP Ajax实现页面无刷新发表评论

    大家都有在网站发表评论的经历,传统的发表过程无非是:发表->提交页面表单->等待刷新页面,这样在网络比较拥挤的时候,往往需要漫长的等待,今天介绍用PHP+Ajax实现页面无刷新发表评论,希望对初学ajax的PHPer有所帮助. 那么首先,我们需要一个基本的ajax开发框架,文件ajax.js就包含了这个框架,代码如下: var http_request=false;  function send_request(url){//初始化,指定处理函数,发送请求的函数    http_request

  • 基于iframe实现类似于ajax的页面无刷新

    本方法是基于iframe实现的,需求是form表单提交带有文件上传的input标签,因此不能使用ajax来提交 首先: 复制代码 代码如下: <form id="form0" action="${pageContext.request.contextPath}/news/baikeAdd.form" enctype="multipart/form-data" method="POST" target="hidd

  • php+ajax制作无刷新留言板

    本文就是和大家分享一款由php结合ajax实现的无刷新留言板,先给大家看一下最后的效果图: 数据库连接代码如下: <?php $conn = @mysql_connect("localhost","root","root") or die ("MySql连接错误"); mysql_select_db("demo",$conn); mysql_query("set names 'utf8'&q

  • jQuery的ajax中使用FormData实现页面无刷新上传功能

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口.关于FormData,大家可以看MDN文档. 1,先看效果图 期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击"ajax提交",将文件上传至服务器,上传成功后,页面给出一个简单的提示. 2,前端的代

  • 简单实现Ajax无刷新分页效果

    Ajax无刷新分页效果,如下代码实现 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax无刷新分页效果</title> <script type="text/javascript"> function showpage(url) { var xhr = new XML

  • Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

    Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub 1.这是需要分页的页面放的 js函数: <span style="font-size:14px;">function paging(page){ $.ajax({ type: "GET", url: "${ctx}/api/v1/user/1/"+(page-1)+"/5", dataType:

  • 浅谈Ajax技术实现页面无刷新

    ajax (ajax开发) AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新

  • 使用laravel和ajax实现整个页面无刷新的操作方法

    1.数据库文件 CREATE TABLE IF NOT EXISTS mr_key ( id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT '键id', project_id int(11) NOT NULL COMMENT '外键项目id', name varchar(100) NOT NULL COMMENT '键名', structure enum('string', 'hash', 'list', 'set', 'zset') C

  • ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题

    在做ajax页面无刷新添加的时候,IE下遭遇Ajax缓存,因为刚开始并不知道IE有这个坏毛病,折腾好久,终于解决问题. 总结一下解决办法: 在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱,[即get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端,而post方式因为参数的不同,不会产生这个问题]而FF下不会出现这种情况.为了不受缓存影响,可以这样做: IE访问策略: Internet选项--浏览历史记录--设置-- Int

随机推荐