欢迎光临

我们一直在努力
当前位置:首页 > 编程技术 >

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

日期:
后台-插件-广告管理-首页/栏目/内容广告位一(PC)
后台-插件-广告管理-首页/栏目/内容广告位一(手机)

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

1、通过jseYvjDz 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: {

        birthhttp://: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: "inqeYvjDzuire_date.php?data=http://www.cppcns.com/web/htmlxhtml/" + "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);

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

后台-插件-广告管理-首页/栏目/内容广告位二(PC)
后台-插件-广告管理-首页/栏目/内容广告位二(手机)
后台-插件-广告管理-内容广告位三(PC)
后台-插件-广告管理-内容广告位三(手机)

相关阅读

  • Flutter StatefulBuilder实现局部刷新实例详解

  • 目录前言页面的全量刷新StatefulBuilderhttp://简介StatefulBuilder的实际应用总结前言
    flutter项目中,在页面数据较多的情况下使用全量刷新对性能消耗较大且容易出现短暂白
  • Flutter StreamBuilder实现局部刷新实例详解

  • 目录前言StreamBuilder 简介StreamBuilder的实际应用总结前言
    在flutter项目中,页面内直接调用setState方法会使得页面重新执行build方法,导致内部组件被全量刷新,造成不必要的
  • Pandas如何将表格的前几行生成html实战案例

  • 目录一、Pandas如何将表格的前几行生成html1.1主要知识点1.2创建 python 文件1.3运行结果 二、Pandas如何计算一列数字的中位数2.1主要知识点2.2创建 python 文件2.3运行结
  • Pandas如何将表格的前几行生成html实战案例

  • 目录一、Pandas如何将表格的前几行生成html1.1主要知识点1.2创建 python 文件1.3运行结果 二、Pandas如何计算一列数字的中位数2.1主要知识点2.2创建 python 文件2.3运行结
  • 一文详解JavaScript 如何将 HTML 转成 Markdown

  • 目录npmscript参数配置前言:
    本篇带来:在 JavaScript 如何将 html 转成 Markdown?先收藏,总有一天要用到!!
    npm
    我们主要是借助 Turndown 这个库来实现的
    npm 安装
    npm i turndown
  • Vue 2源码解析HTMLParserOptions.start函数方法

  • 目录htmlParserOptions.start()处理后的 input ast elementHTMLParserOptions.start()
    用来解析标签的开始部分(匹配到标签开始部分时调用),主要区分标签类型、解析标签指令配
后台-插件-广告管理-内容广告位四(PC)
后台-插件-广告管理-内容广告位四(手机)

热门文章

后台-插件-广告管理-侧边广告位一(PC)
后台-插件-广告管理-侧边广告位一(手机)
  • HTML 表单组件实例代码

  • HTML 表单用于搜集不同类型的用户输入。下文通过代码给大家分享html 表单组件实例代码,感兴趣的朋友参考下吧 废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE
  • html2canvas 将html代码转为图片的使用方法

  • 转换代码到图片使用 html2canvas,这是一个非常著名的从浏览器网页截图的开源库,使用很方便,功能也很强大。 使用 html2canvas http:// html2canvas 的使用非常简单,简单
  • HTML网页中插入视频的方法小结

  • 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE 9、Chrome),都不支持的(IE6、
  • HTML实现文本框只读不能修改其中的内容

  • 废话不多说了,直接给大家贴代码了,具体代码如下所示: <!--方法1:>http:// 当鼠标放不上就离开焦点 --> <input type="text" name="input1" value=http://www.cppcns.com/web
  • 移动端专用的meta标签设置大全

  • 前言 之前学习前端中,对meta标签的了解仅仅只是这一句。 <meta charset="UTF-8"> 但是打开任意的网站,其head标签内都有一列的meta标签。比如我们我们网站,但是自己却很不熟
后台-插件-广告管理-侧边广告位二(PC)
后台-插件-广告管理-侧边广告位二(手机)

最新文章

  • 在Asp.net core项目中使用WebSocket

  • 今天小试了一下在ASP.NET core中使用websocket,这里记录一下: 在 Startup 类的 Configure 方法中添加 WebSocket 中间件。 app.UseWebSockets(); 它也可以传入一些参数 app.Us
  • Vue快速理解事件绑定是什么

  • 目录一、监听事件二、事件修饰符1、stop修饰符阻止事件冒泡2、capture修饰符3、self修饰符4、prevent修饰符5、键盘事件修饰符6、鼠标事件修饰符一、监听事件 监听事件一般
  • C#实现模拟ATM自动取款机功能

  • 目录(1)关于用户帐号的类:Account(2)关于银行数据库的类:BankDatabase(3)关于ATM屏幕显示的类:Screen(4)关于ATM键盘的类:Keypad(5)关于进钞、出钞口的类:DepositSlot(6)关于ATM
  • Java设计模式之抽象工厂模式浅析讲解

  • 1.介绍 当系统准备为用户提供一系列相关对象,又不想让用户代码和这些对象形成耦合时,就可以使用抽象工厂模式。 2.如何实现 1)抽象产品--Car 2)具体产品--BYDCar、TSLCar 3)抽象
  • 如何动态替换Spring容器中的Bean

  • 目录动态替换Spring容器中的Bean原因方案实现Spring中的bean替换问题动态替换Spring容器中的Bean 原因 最近在编写单测时,发现使用 Mock 工具预定义 Service 中方法的行为特
  • C#优雅的实现INotifyPropertyChanged接口

  • INotifyPropertyChanged接口在wpF或WinFrom程序中使用还是经常用到,常用于通知界面属性变更。标准写法如下: class NotifandroidyObject : INotifyPropertyChanged {
后台-插件-广告管理-侧边广告位三(PC)
后台-插件-广告管理-侧边广告位三(手机)