介绍, & lt; div 类=癱ontainer"比;
,& lt; h2 类=癲isplay-1"在留言板& lt;/h2>
,& lt; hr>
,& lt; div id=發oading"在正在拼命加载数据..... & lt;/div>
,& lt; ul id=癿essages",类=發ist-unstyled"比;
,& lt;/ul>
,& lt; hr>
,& lt; div 类=癴orm-group"比;=?& lt; label ; txt_name"祝辞称呼:& lt;/label>
,& lt; input 类=癴orm-control", id=皌xt_name", name=皒xx",类型=皌ext"比;
,& lt;/div>
,& lt; div 类=癴orm-group"比;=?& lt; label ; txt_content"在留言:& lt;/label>
,& lt; textarea 类=癴orm-control", id=皌xt_content",关口=?0“,行=?0“祝辞& lt;/textarea>
,& lt;/div>
,& lt; button 类型=癰utton", id=癰tn_send",类=癰tn btn-primary"在提交& lt;/button>
& lt;/div> //- - - - - - - - - - - -实现页面初始化数据,开始- - - - - - - - - - - -
& lt; script>
,//初始化,加载数据
,loadData ();
,//获取已经存在的数据,加载到页面中
,/*方式:GET
,方法名:/getMsg
,参数:无
,返回:,所有留言(JSON), */,function loadData (), {//1。新建xhr 对象
,var xhr =, new XMLHttpRequest ();//2。设置请求参数和url
,xhr.open(& # 39;得到# 39;,,& # 39;/getMsg& # 39;);//3。调用发送方法,发送请求
,xhr.send ();//4。接收一个参数,返回服务器的响应结构=,,xhr.onload function (), {
,//JSON转换成数组
,var arr =, JSON.parse (this.response);
,//开始遍历数组
,var str =, & # 39; & # 39;;
,arr.forEach (function (避署),{//将才能循环遍历出来的拼接到到一个字符串中,
str +=,才能“& lt; li 类=癿edia"祝辞
,,& lt; img 类=癿r-3", src=https://www.yisu.com/zixun/" avatar.png " alt=$ {ele.name}>
李 ';
});//获取ul将拼接的李放置到ul中
var mes=. getelementbyid(“信息”);
mes。innerHTML=str;//清空默认显示拼命加载中
如果(mes.childNodes。长度!=0){//获取拼命加载中id
var loadMes=. getelementbyid(“加载”);
loadMes。innerHTML=" ";
}
}
}> 脚本//添加一个发表留言的功能/*
方式:文章
方法名:/addMsg
参数:名称(字符串)
内容(字符串):
返回值:添加成功:真的
添加失败:假的
*///新增的方法//获取提交按钮
var btn_send=. getelementbyid (“btn_send”);
btn_send。onclick=function () {//1。新建xhr对象
var xhr=new XMLHttpRequest ();//2 .设置请求参数和url
xhr。打开(“文章”、“/addMsg”);//3 .设置请求头
xhr。setRequestHeader(“内容类型”、“应用程序/x-www-form-urlencoded”);//获取称呼内容
var txt_name=. getelementbyid (“txt_name”);//获取留言内容
var txt_content=. getelementbyid (“txt_content”);//4。调用发送方法发送请求
xhr。发送(' name=' + txt_name。内容和价值+ '=' + txt_content.value);//5。接收一个参数返回服务器的响应结构
xhr。onload=function () {
如果这一点。响应===" true ") {//添加完毕之后,重新加载
loadData ();//添加完毕之后清空输入栏文本
txt_name。值=txt_content。值=";
其他}{
alert("添加失败”);
}
}
}>
这篇文章将为大家详细讲解有关Ajax如何实现页面无刷新留言效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
利用Ajax实现页面无刷新留言效果
<强>实现效果
前言:在百度贴吧,以及一些论坛中,当你回复或者评论完毕之后,从来没有见过页面重新刷新加载的效果,那么这个究竟是怎么做成的呢,也就是利用Ajax技术,页面无刷新效果,废话不多说,直接上代码。
实现效果
<强> html部分:
<强> css部分:
css部分引用了引导。css
js部分:
$ {ele.name}
$ {ele.content}
关于“Ajax如何实现页面无刷新留言效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
