页面刷新 整个页面刷新和局部刷新

Posted dreamflower

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面刷新 整个页面刷新和局部刷新相关的知识，希望对你有一定的参考价值。

整个页面刷新

1.页面自动刷新：把如下代码加入＜head>区域中

＜meta http-equiv="refresh" content="20">

其中20指每隔20秒刷新一次页面.

2.页面自动跳转：把如下代码加入＜head>区域中

＜meta http-equiv="refresh" content="20;url=“#">

其中20指隔20秒后跳转到#页面

3.页面自动刷新js版

＜script language="javascript">
function myrefresh(){
window.location.reload();
}
setTimeout(‘myrefresh()‘,1000); //指定1秒刷新一次
＜/script>

jquery如何实现div定时刷新

 1 <head>
 2 
 3 <script src="jQuery/jquery-1.4.1.min.js" type="text/javascript"></script>
 4 
 5 <script>
 6 $(document).ready(function () {
 7 
 8 setInterval("startRequest()",1000);
 9 //setInterval这个函数会根据后面定义的1000既每隔1秒执行一次前面那个函数
10 //如果你用局部刷新，要用AJAX技术
11 });
12 
13 function startRequest()
14 {
15 $("#date").text((new Date()).toString());
16 }
17 </script>
18 
19 </head>

ajax局部刷新

ajax局部定时刷新

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4 <meta charset="utf-8">
 5 <title>ajax自动局部定时刷新</title>
 6 <script type="text/javascript" src="jquery-1.11.2.js"></script>
 7 </head>
 8 <body>
 9 <script>
10 $(document).ready(function(){
11    setInterval("change()",1000)
12 })
13 function change(){ 
14 $.ajax({
15 url: "demo1.php",
16 cache: false,
17 dataType:"json",
18 success: function(data){
19  $("#aa").html(data);
20 }
21  })
22  }
23  </script>
24 <div id="aa"></div>
25 </body>
26 </html>

ajax局部手动刷新

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4 <meta charset="utf-8">
 5 <title>ajax手动局部刷新</title>
 6 <script type="text/javascript" src="jquery-1.11.2.js"></script>
 7 </head>
 8 <body>
 9 <script>
10 function change(){ 
11 $.ajax({
12 url: "demo1.php",
13 cache: false,
14 dataType:"json",
15 success: function(data){
16  $("#aa").html(data);
17 }
18  })
19  }
20  </script>
21 <div id="aa"></div>
22 <button  onclick="change()">手动刷新按钮</button>
23 </body>
24 </html>

所测试的demo1.php如下：

1 <?php
2 header ( "Content-type: text ml; charset=UTF-8" );
3 
4   $oldnum=file_get_contents("c:\111.txt");
5   $oldnum=$oldnum+1; 
6   file_put_contents("c:\111.txt",$oldnum);
7  
8   echo $oldnum;
9 ?>

 

以上是关于页面刷新 整个页面刷新和局部刷新的主要内容，如果未能解决你的问题，请参考以下文章

html页面局部刷新

ajax刷新局部页面数据后js事件失效

局部刷新登录页面的实现方法

jquery刷新页面的实现代码（局部及全页面刷新）

基于H5 pushState和Ajax完美实现页面局部刷新

Ajax