1、新建一个html文件,命名为test.html。
2、在test.html文件内,引入jquery.min.js库文件,成功加载该文件,才能使用jquery中的方法。
3、在test.html文件内,使用button标签创建一个按钮,按钮名称分别为“刷新页面”。
4、在test.html文件内,设置button标签的id为btn,主要用于下面通过该id获得button对象。
5、在js标签内,使用$(function(){ })方法在页面加载完成时,通过window.location.href获得当前页面的链接,并把链接保存在变量url中。
6、在js标签内,通过id(btn)获得button对象,给它绑定click点击事件,实现当按钮被点击时,使用window.location.href方法跳转至url,从而实现刷新页面的效果。
1、可以使用定时器setInteval()方法来实现不断刷新2、当点击按钮之后,执行方法利用clearInterval方法将定时器停止
代码如下:
$(function(){
var obj = setTimeout(定向的页面, 2000)// 每2秒刷新一次页面
$("#but_stop").click(function(){
clearInterval(obj)// 点击即停止刷新
})
})
题主可使用javascript里的ajax函数来实现html页面里的局部刷新功能,比如:我只刷新html页面中的某个div,把div中的内容换掉,或者数据更新,可以通过改变ajax函数的url访问路径来实现,可以访问某个目录下的文件,或者发送请求到服务器来刷新数据都可以,这是比较常用的方法,我举个例子:
我在html页面中用ajax来将ajax_info.txt这个本地文本文档中的内容重新刷新加载到id为myDiv的div控件中,而页面不用整个刷新。
ajax_info.txt内容为:
<p>AJAX 不是新的编程语言,而是一种使用现有标准的新方法。</p>
<p>
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下
</p>
html页面代码为:
<html><head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest()
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true)
xmlhttp.send()
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
原本页面效果为:
点击按钮后页面效果为:
题主可以一试,如果觉得繁琐,可以看看jquery的ajax函数,是经过优化和简化的,更方便使用和上手。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)