站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: HTML页面局部刷新的实现代码
搜索:
您的位置: 主页 > 教程 > 网页设计 > HTML > » 正文

HTML页面局部刷新的实现代码

来源: 易采站长站

事件响应刷新:有请求才会刷新

1、通过JS HTML DOM或jQuery获取HTML元素,通过DOM方法或jQuery方法监听页面事件,获取用户请求;

2、通过Ajax将用户请求提交至服务器,服务器处理后返回结果,再由Ajax接收数据;

3、通过DOM方法或jQuery方法将数据载入页面,事件响应刷新完成。

$('#input_date').keypress(function(e){   if(e.keyCode=='13'){     $.ajax({       type: "POST",       url: "inquire_date.php",       data: {         birth:null, //1.获取用户请求(即某些事件),发送到服务器处理         date:$('#input_date input').val()       },       dataType: "json", //2.从服务器获取数据       success: function(data){         if (data.success) {           var festival = data.fetivalInquireResult; //3.将获取的数据载入页面,实现页面事件响应刷新           $('#show_festival').text(festival);         } else {           $('#show_festival').text("获取节日失败");         }       },       error: function(jqXHR){       alert("发生错误:" + jqXHR.status);       },     });   $('#festival').hide();   $('#response_festival').show();   } });

局部自动刷新:没有请求局部页面也会自动刷新

1、通过定时器函数如setTimeout(),让Ajax每隔一段时间从服务器获取数据;

2、通过DOM方法或jQuery方法将数据载入页面,实现页面局部自动刷新。

$(document).ready(function(e){ setTimeout('updateShow()',0); }); /*局部自动刷新页面数据*/ function updateShow(){   $.ajax({     type: "GET",     url: "inquire_date.php?data=" + "inquire",     dataType: "json", //1.通过定时器定时从服务器获取数据     success: function(data) {       if (data.success) {         var agesFormat = data.agesFormat;         var daysFormat = data.daysFormat; //2.将数据载入页面,实现自动刷新         $('#ages').text(agesFormat);         $('#days').text(daysFormat);       } else{         alert("获取数据失败");       }     },     error: function(jqXHR){     alert("发生错误:" + jqXHR.status);     },   });   setTimeout('updateShow()',500); }

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

最新图文资讯
1 2 3 4 5 6
相关文章列表:
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -