html5自动局部刷新,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);
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html5自动局部刷新,HTML页面局部刷新的实现代码相关推荐
- 微信小程序如何刷新当前页面或者刷新上一个页面
小程序刷新当前页面和刷新上个页面 刷新当前页面 const pages = getCurrentPages() //声明一个pages使用getCurrentPages方法 const perpage ...
- jquery刷新当前页面、刷新父级页面
jquery刷新当前页面.刷新父级页面 window.location.reload(); // 刷新当前页面 parent.location.reload(); // 刷新父级页面 opener.l ...
- 如何使用jQuery刷新当前页面、刷新父级页面?
如何使用jQuery刷新当前页面.刷新父级页面? 1.全页面刷新方法 window.location.reload(); //刷新当前页面.parent.location.reload(); //刷新 ...
- java局部刷新_HTML页面局部刷新的实现代码
这篇文章主要介绍了HTML页面局部刷新的实现代码的相关资料,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 事件响应刷新:有请求才会刷新 1.通过 ...
- jQuery子页面刷新父页面--局部刷新+整体刷新 [转]
用的是_window.Open()方式打开的窗口(风声js的window插件打开子窗口) ,类似于window.open() //用于刷新父窗口整个页面 window.parent.location. ...
- jQuery子页面刷新父页面--局部刷新+整体刷新
用的是_window.Open()方式打开的窗口(风声js的window插件打开子窗口) ,类似于window.open() //用于刷新父窗口整个页面 window.parent.location. ...
- java刷新当前页面_js刷新当前页面的5种方式
1. reload reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从 ...
- 解决iview UI的Table组件数据刷新但是页面不刷新的问题
在改变了 Table 绑定的 data 变量的数值后,表格的数据刷新了,但是页面不刷新,之前滚动到的位置仍然在那里,而且如果左右两侧有固定列的时候,会错位,解决方法是给 Table 组件绑定一个 Ke ...
- iView UI --Table组件数据刷新但是页面未刷新
问题:table选择框,获取数据后,根据需求需要默认选中个别选择框,数据打印fromConData中_checked值已经为true了,但是页面上并没有勾选对应选择框 解决:table 中设置 :ke ...
最新文章
- 针对“永恒之蓝(WannaCry)”攻击紧急处置手册
- 成功解决matplotlib\cbook\deprecation.py:107: MatplotlibDeprecationWarning: Passing one of 'on', 'true',
- 【问链财经-区块链基础知识系列】 第三十三课 区块链溯源方案设计-中检集团区块链溯源平台
- 2019.3.18 区块链论文翻译
- 为什么要“男孩穷养、女孩富养”
- Html5学习笔记1 元素 标签 属性
- linux用户修改用户shell
- 在VMware开启此虚拟机时出现内部错误
- 出错提示:“Could not flush the DNS Resolver Cache: 执行期间,函数出了问题”的解决方法...
- idea使用时遇到的一个小问题
- axure 发布 主页_【最新实习发布!】滴滴后台/数据产品经理实习生
- 我的联想拯救者y7000p怎么安装双系统Linux ubuntu 18.04呢?
- 3、检验程序模块化指标---模块化系数-----labview宝典
- 2021年度总结——波澜不惊
- Mybatis使用choose when
- 一年级上册计算机教学计划,一年级信息技术上册教学计划一年级信息技术教学计划...
- 12306官网页面html,新版12306网址页面以及订票系统功能介绍
- Ubuntu Server 个人影音服务器,实现NAS、远程下载、私人云盘等
- PHP获取路径和目录方法
- 2022低压电工考试模拟100题及答案