对于学习前端的小伙伴来说, 页面是首先需要了解的并熟悉的第一课, 今天小猿圈 web 前端讲师就为你分享 html 页面局部刷新实现代码详解, 希望对你的学习前端有所帮助.
事件响应刷新: 有请求才会刷新
1, 通过 JSHTMLDOM 或 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);
- }
小猿圈 Web 前端讲师认为: 授之以鱼更授之以渔, 想要学好 Web 前端首先需要就是端正自己的学习态度, 明确学习目标, 这样才能坚持学习. 想要了解更多关于前端方面的小伙伴, 可以关注小猿圈每天的动态前端自学交流群: 820024416, 会不定期更新互联网编程知识, 希望对你的学习有一定的帮助.
来源: http://www.jianshu.com/p/3a6d805464d4