加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程 > 正文

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

发布时间:2020-03-18 08:52:08 所属栏目:编程 来源:站长网
导读:事件响应刷新:有请求才会刷新 1、通过JS HTML DOM或jQuery获取HTML元素,通过DOM方法或jQuery方法监听页面事件,获取用户请求; 2、通过Ajax将用户请求提交至服务器,服务器处理后返回结果,再由Ajax接收数据; 3、通过DOM方法或jQuery方法将数据载入页面

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

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); }

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读