酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

【云小站】新老客都返现+现金红包+瓜分60万奖池
酷站

html

旗下栏目: html css xml html5 DW bootstrap Frontpage教程

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

来源:转载 作者:秩名 人气: 发布时间:2019-01-06
本篇文章主要介绍了实现HTML页面局部刷新的代码方法,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

本篇文章给大家介绍实现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);
 
}


版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:

相关文章

  • 详解网页编码之GB2312、GBK与UTF-8的区别

    详解网页编码之GB2312、GBK与UTF-8的区别

    首先,我们要明白,GB2312、GBK和UTF-8都是一种字符编码,除此之外,还有好多字符编码。只是对于我们中国人的网站来说,用这三种编码 比较多。简单的说一下,为什么要用编码,在计算机内,储存文本信息用ASC II码,每一个字符对应着唯一......
    12-22
  • 解决使用html2canvas对有百度地图的Dom元素处理成图片

    解决使用html2canvas对有百度地图的Dom元素处理成图片

    问题1:百度地图应用的是瓦片式图片(地图是一张张图片拼出来的),html2canvas 处理时,遇到非同一域名下的图片,浏览器会显示跨域的报错,也无法用反向代理来解决,因为瓦片图片的域名不确定,无法指定 proxy_pass 解决 :使用百度地图......
    10-14
  • html/css中float浮动的用法示例教程

    html/css中float浮动的用法示例教程

    一、float基础用法示例 1、我们先建两个div盒子,设置高度、宽度和背景颜色; 最开始两个盒子在网页上的位置如下: 然后我们将红色盒子浮动到右边 然后我们会发现红色盒子浮动到了右边,但是蓝色盒子就直接上移到了原先红色盒子的位置。 ......
    09-10
  • html的几种水平垂直居中的方式(基础)总结

    html的几种水平垂直居中的方式(基础)总结

    我们在编写马过程中,想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几种常用的水平垂直居中的方法。 第一种方法 !--html盒子代码--!--水平垂直居中--div class=Centered1 pd第一种/p/div!-css样式部分-- .Centered1......
    08-24
  • HTML中的if判断用法解析

    HTML中的if判断用法解析

    在django的web开发过程中,编写html时,从后端传入同名列表变量,但是内容格式有所区别,需要分别判断,查阅了很多文章试了好几种方法,格式似乎都不太对(本人没有系统学习过前端,基本都是照葫芦画瓢)后来找到django框架下html的if用......
    08-24
  • HTML实现检测输入已完成功能的方法

    HTML实现检测输入已完成功能的方法

    使用onInput(event)检测是否在输入 使用onporpertychange=onChange(event)检测是否内容发生改变 使用onBlur=finnishInput(event)检测是否失去焦点 可以通过先检测是否在输入,记下状态,如果上次在输入信息,然后失去焦点,则可以判断为......
    04-18
  • main标签的作用介绍

    main标签的作用介绍

    本篇文章介绍main标签的作用。 main标签的作用是什么? main标签规定文档的主要内容,main的主要目的是将ARIA的地标性作用main映射到 HTML中的元素,这可以帮助那些屏幕阅读设备和辅助设备知道页面的主要内容是从哪里开始的。 说明:main......
    02-11
  • 实现HTML页面局部刷新的代码方法

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

    本篇文章给大家介绍实现HTML页面局部刷新的代码方法。 事件响应刷新:有请求才会刷新 1、通过JS HTML DOM或jQuery获取HTML元素,通过DOM方法或jQuery方法监听页面事件,获取用户请求; 2、通过Ajax将用户请求提交至服务器,服务器处理后......
    01-06
  • 详解4种html中position属性用法

    详解4种html中position属性用法

    本文给大家介绍4种html中position属性用法。 position的四个属性值: 1.relative 2.absolute 3.fixed 4.static 下面分别讲述这四个属性: div id=parent div id=sub1sub1/div div id=sub2sub2/div/div 1. relative relative属性相对比较......
    10-27
  • HTML实现双11抢劵(设定时间打开抢券的页面)的方法

    HTML实现双11抢劵(设定时间打开抢券的页面)的方法

    本篇文章给大家介绍HTML实现双11抢劵(设定时间打开抢券的页面)的方法 小编就直接给大家贴代码了,具体代码如下所示: !DOCTYPE htmlhtml lang=en xmlns=http://www.w3.org/1999/xhtmlhead meta charset=utf-8 / title/title style type=t......
    08-26

最新更新