jQuery实现AJAX定时刷新局部页面的两种方法
本文介绍利用jQuery实现网页局部内容定时刷新的两种方案。第一种通过setInterval配合append或html方法手动更新DOM；第二种利用load方法加载指定URL片段，实现类似仪表盘的实时监控效果。文章提供了具体的JavaScript代码示例及JSP页面配置注意事项，帮助开发者快速实现无需刷新整个页面的动态数据展示。
jQuery实现AJAX定时刷新局部页面的两种方法
方法一：
关于局部刷新，通常大家首先想到的是使用AJAX技术。当然，除了AJAX，我们也可以利用jQuery中的append方法向指定区域追加内容来实现更新。不过，从实用性和数据交互的角度来看，通过AJAX加载数据仍然是最主流且高效的方式。
方法一：使用setInterval与append/html刷新
示例：实现定时局部刷新
实现定时局部刷新的核心在于使用jQuery中的setInterval方法。该方法接收两个参数：第一个是定时执行的函数名，第二个是时间间隔（毫秒）。如以下代码所示，配置为每隔10微秒（注：原文如此，通常应为毫秒）执行一次名为aa的方法。
<script>
$(function(){
setInterval(aa,10);
function aa(){
$("#aa").append("fdsadfsa");
}
})
</script>
示例2
<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应用
$("#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结构部分
<div id="mainContent">注意：后台处理时，需要针对div内的信息单独编写一个JSP页面。否则，开发者必须自行封装好所需返回的页面信息。
方法二：使用load方法加载指定URL片段
方法二：
有时，我们需要一种机制来不断刷新网页，以提供实时的仪表盘显示。例如，在仪表盘上显示交通灯以指示系统状态。如果只能刷新页面的特定部分，这将非常有用。
借助jQuery JavaScript库，只刷新页面的一部分变得非常容易。一旦在页面中引入了jQuery库，我们只需要一行代码即可实现这一功能。
JavaScript实现代码如下：
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>因此，只需将这段简短的JS代码放入页面，即可刷新ID为content标签内的所有内容。我们可以设定每5秒执行一次：
setInterval(function() {
$("#content").load(location.href+" #content>*","");
}, 5000);这就是全部！通过这一行代码，轻松完成实时监控类功能。无需使用奇怪的meta刷新标签或iframe等变通方案，即可在Web应用中实现。
每5秒，我们将刷新相同URL的内容，并更新ID为content的元素内部的所有子元素内容。
JS脚本在App中运行报错怎么解决
2026-11-04 23:11:03
JS怎么使用padStart方法给数字补零
2026-11-04 11:12:03
JS是什么意思？JavaScript全称及基本定义
2026-11-04 08:05:29
JS 使用 toFixed(1) 保留一位小数的基本用法与注意事项
2026-11-03 18:34:57
JS字符串转整数：parseInt与Number的区别及用法
2026-11-03 17:26:54