利用jQuery实现AJAX定时刷新局部页面实例

通过两种方法实例讲解ajax定时刷新局部页面,当然方法有很多种,也可以不使用ajax来刷新页面,可以使用jquery中的append来给指定内容加东西,但是都不太实用,最实用的方法还是ajax加载数据了。

方法一:

局部刷新我们讲述到最多的是ajax 了,当然也可以不使用ajax来刷新页面了,我们可以使用jquery中的append来给指定内容加东西了,当然最实用的还是ajax加载数据了。

例子,定时局部刷新

定时局部刷新用到jQuery里面的setInterval方法,setInterval方法两个参数,第一个是设置定时执行的函数名,第二个是时间,如下代码所示,设置每隔10微秒定时执行一次aa方法。

1

2

3

4

5

6

7

8

<script>

$(function(){

 setInterval(aa,10);

 function aa(){

   $("#aa").append("fdsadfsa");

 }

})

</script>

例子2

1

2

3

4

5

6

7

8

9

10

11

12

<head>

<script src="jQuery/jquery-1.4.1.min.js" type="text/javascript"></script>

<script>

$(document).ready(function () {

setInterval("startRequest()",1000);

});

function startRequest()

{

$("#date").text((new Date()).toString());

}

</script>

</head>

例子3 下面我们就看一下这种刷新方式是如何实现的。

jsp页面ajax

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

$("#waitWork").click(function(){

 var url = "请求地址";

 var data = {type:1};

 $.ajax({

  type : "get",

  async : false, //同步请求

  url : url,

  data : data,

  timeout:1000,

  success:function(dates){

  //alert(dates);

  $("#mainContent").html(dates);//要刷新的div

  },

  error: function() {

        // alert("失败,请稍后再试!");

      }

 });

 });

html

1

<div id="mainContent">

注意:后台需要针对div里的信息单独用一个jsp页面,不然就需要自己封装好需要的页面信息返回

方法二:

不时,我需要某种机制,不断刷新网页,以提供一个实时的仪表板某种。如果我只能刷新一个特定的页面的一部分,这将是很大的,例如:仪表盘上的交通灯显示系统状态。

这是很容易通过使用jQuery JavaScript库,只刷新页面的一部分。一旦我们纳入我们的页面的jQuery库,我们只需要1行的

JavaScript得到它的工作:

1

<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>

所以我们只要我们的页面放入这个小的JS代码片段刷新里面的内容ID标签的一切,让我们说,每5秒:

1

2

3

setInterval(function() {

  $("#content").load(location.href+" #content>*","");

}, 5000);

这就是它!!因此,这是很容易完成一些实时监控的行为,只是那行代码。没有更奇怪的元刷新标记或iframe一种解决方法,在Web应用程序。

每5秒,我们将刷新内容相同的URL和所有元素,驻留在元素ID为content元素的内容:内容。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/199931.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JAVA优化: MD5 加密的工具类

MD5 加密的工具类&#xff0c;提供了对字符串进行 MD5 加密的功能。主要包括以下几个方法&#xff1a; md5(String s)&#xff1a;对传入的字符串进行 MD5 加密&#xff0c;并返回加密后的字节数组。toHex(byte hash[])&#xff1a;将字节数组转换为十六进制字符串表示。hash(…

ApplicationRunner 类

优质博文&#xff1a;IT-BLOG-CN 在开发中可能会有这样的情景。需要在容器启动的时候执行一些内容。比如读取配置文件&#xff0c;数据库连接之类的。SpringBoot给我们提供了两个接口来帮助我们实现这种需求。这两个接口分别为CommandLineRunner和ApplicationRunner。他们的执…

JavaScript 代码整洁技巧

为什么代码要整洁&#xff1f; 代码质量与整洁度成正比。有的团队在赶工期的时候&#xff0c;不注重代码的整洁&#xff0c;代码写的越来越糟糕&#xff0c;项目越来越混乱&#xff0c;生产力也跟着下降&#xff0c;那就必须找更多人来提高生产力&#xff0c;开发成本越来越高…

C/C++,图算法——求强联通的Tarjan算法之源程序

1 文本格式 #include <bits/stdc.h> using namespace std; const int maxn 1e4 5; const int maxk 5005; int n, k; int id[maxn][5]; char s[maxn][5][5], ans[maxk]; bool vis[maxn]; struct Edge { int v, nxt; } e[maxn * 100]; int head[maxn], tot 1; vo…

Unity UGUI控件之Horizontal Layout Group

Horizontal Layout Group是Unity中的UGUI控件&#xff0c;用于在水平方向上对子对象进行布局。 主要有一下作用&#xff1a; 水平布局&#xff1a;Horizontal Layout Group将子对象按照水平方向进行布局&#xff0c;可以控制子对象的排列顺序和间距。自动调整尺寸&#xff1a…

不到1000行代码,PyTorch团队让Llama 7B提速10倍

在过去的一年里&#xff0c;生成式 AI 发展迅猛&#xff0c;在这当中&#xff0c;文本生成一直是一个特别受欢迎的领域&#xff0c;很多开源项目如 llama.cpp、vLLM 、 MLC-LLM 等&#xff0c;为了取得更好的效果&#xff0c;都在进行不停的优化。 作为机器学习社区中最受欢迎框…

面试就是这么简单,offer拿到手软(四)—— 常见java152道基础面试题

面试就是这么简单&#xff0c;offer拿到手软&#xff08;一&#xff09;—— 常见非技术问题回答思路 面试就是这么简单&#xff0c;offer拿到手软&#xff08;二&#xff09;—— 常见65道非技术面试问题 面试就是这么简单&#xff0c;offer拿到手软&#xff08;三&#xff…

WIN10下解决HIVE 初始化MYSQL表报错:Unknown version specified for initialization

今天本地WINDOWS装HIVE&#xff0c;走到最后一步初始化数据库死活不通过&#xff1a; D:\hive\hive-rel-release-3.1.3\bin\ext>hive --service schematool -dbType mysql -initSchema --verbose SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found bind…

flask 上传文件

from flask import Flask, request, render_template,redirect, url_for from werkzeug.utils import secure_filename import os from flask import send_from_directory # send_from_directory可以从目录加载文件app Flask(__name__)#UPLOAD_FOLDER media # 注意&#xff…

深入理解强化学习——马尔可夫决策过程:占用度量-[代码实现]

分类目录&#xff1a;《深入理解强化学习》总目录 在文章《深入理解强化学习——马尔可夫决策过程&#xff1a;占用度量-[基础知识]》我们介绍了占用度量的基础知识&#xff0c;本文我们编写代码来近似估计占用度量。这里我们采用近似估计&#xff0c;即设置一个较大的采样轨迹…

会声会影2024购买多少钱 会声会影在哪里购买

掌握视频编辑技术&#xff0c;能为我们的工作和生活带来很多帮助。例如&#xff1a;将我们精心编辑的视频&#xff0c;上传到抖音、快手等平台进行变现&#xff1b;通过天马行空的视频创意&#xff0c;摇身一变成为B站up主。因此&#xff0c;拥有一款像会声会影这样的视频编辑软…

信号可靠性剖析

问题 基于信号发送的进程间通信方式可靠吗&#xff1f;&#xff1f;&#xff1f; 信号查看(kill -l) 信号的分类 不可靠信号 (传统信号) 信号值在 [1, 31] 之间的所有信号 可靠信号 (实时信号) 信号值在 [SIGRTMIN&#xff0c;SIGRTMAX]&#xff0c;即&#xff1a;[34&…

计算机组成原理学习-总线总结

复习本章时&#xff0c;思考以下问题&#xff1a; 1)引入总线结构有什么好处&#xff1f;2)引入总线结构会导致什么问题&#xff1f;如何解决&#xff1f;

Squid安装与配置(ip代理)

继前面一篇Tinyproxy安装与配置(ip代理)&#xff0c;在实际使用中会发现在请求一些网站时会被拒绝&#xff0c;那是因为Tinyproxy其实不支持所谓的高匿代理。所以这次用功能更加丰富的squid试试。 1、安装 yum install squid -y yum install httpd-tools -y2、配置 1、备份原…

变电站设计综合应用软件

产品概述 变电站设计综合应用软件,以下称为软件,是一款面向智能变电站虚拟二次回路设计和光纤回路设计的单机版桌面应用软件。软件为用户提供了直观易用、一键安装、功能齐全的轻量级的设计支撑。像常规的工具化软件一样,该软件在开始设计时需要通过新建一个项目,开启一段…

Oracle初始化参数文件pfile和spfile

pfile &#xff1a;Oracle 9i之前&#xff0c;ORACLE一直采用PFILE方式存储初始化参数&#xff0c;该文件为文本文件&#xff0c;可以在操作系统级别修改。当spfile文件修改出现错误导致oracle无法启动时&#xff0c;可以使用 pfile文件启动数据库 spfile&#xff1a;从Oracle…

Python 元组详解(tuple)

文章目录 1 概述1.1 性质1.2 下标1.3 切片 2 常用方法2.1 访问&#xff1a;迭代、根据下标2.2 删除&#xff1a;del2.3 运算符&#xff1a;、*2.4 计算元组中元素个数&#xff1a;len()2.5 返回元组中元素最大值&#xff1a;max()2.6 返回元组中元素最小值&#xff1a;min()2.7…

Linux快速给用户改密码

由于巡检过程中需要修改部分用户名密码&#xff0c;这些强密码包含大小写、数字和特殊符号&#xff0c;完全没有规律&#xff0c;让我手动输是不可能的&#xff0c;于是使用以下命令来输入&#xff0c;但是为了不在history里面留下痕迹&#xff0c;所以先关闭了历史命令功能&am…

【C++】const关键字的详解!!

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

Android MVVM+coroutine+retrofit+flow+hilt

文章目录 Android MVVMcoroutineretrofitflowhilt概述依赖注入层数据层视图层模型视图层代码下载 Android MVVMcoroutineretrofitflowhilt 概述 代码结构&#xff1a; 依赖注入层 数据库&#xff1a; Module InstallIn(SingletonComponent::class) class DBModule {Singleto…