这篇文章主要介绍了 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("获取节日失败")
- }
- },// 欢迎加入全栈开发交流群一起学习交流: 619586920
- 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) {
- // 欢迎加入全栈开发交流群一起学习交流: 619586920
- var agesFormat = data.agesFormat;
- var daysFormat = data.daysFormat;
- //2. 将数据载入页面, 实现自动刷新
- $('#ages').text(agesFormat);
- $('#days').text(daysFormat);
- } else{
- alert("获取数据失败");
- }
- },
- error: function(jqXHR){
- alert("发生错误:" + jqXHR.status);
- }, // 欢迎加入全栈开发交流群一起学习交流: 619586920
- });
- setTimeout('updateShow()',500);
- }
结语
感谢您的观看, 如有不足之处, 欢迎批评指正.
获取资料
来源: http://www.qdfuns.com/article/51117/2a3794c381afcadd723fa600b5817840.html