jQuery實現AJAX定時重新整理局部頁面執行個體_AJAX相關

來源:互聯網
上載者:User

方法一:

局部重新整理我們講述到最多的是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元素的內容:內容。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.