方法一:
局部刷新我們講述到最多的是ajax 了,當然也可以不使用ajax來刷新頁面了,我們可以使用jquery中的append來給指定內容加東西了,當然最實用的還是ajax加載數據了。
例子,定時局部刷新
定時局部刷新用到jQuery裡面的setInterval方法,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頁面,不然就需要自己封裝好需要的頁面信息返回
方法二:
不時,我需要某種機制,不斷刷新網頁,以提供一個實時的儀表板某種。如果我只能刷新一個特定的頁面的一部分,這將是很大的,例如:儀表盤上的交通燈顯示系統狀態。
這是很容易通過使用jQuery JavaScript庫,只刷新頁面的一部分。一旦我們納入我們的頁面的jQuery庫,我們只需要1行的
JavaScript得到它的工作:
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
所以我們只要我們的頁面放入這個小的JS代碼片段刷新裡面的內容ID標簽的一切,讓我們說,每5秒:
setInterval(function() { $("#content").load(location.href+" #content>*",""); }, 5000);
這就是它!!因此,這是很容易完成一些實時監控的行為,只是那行代碼。沒有更奇怪的元刷新標記或iframe一種解決方法,在Web應用程序。
每5秒,我們將刷新內容相同的URL和所有元素,駐留在元素ID為content元素的內容:內容。