$.ajax偵測秒數自動更新function取得最新資料的方法(只更新內容區塊不刷新頁面)-教學撰寫:徐嘉裕Neil hsu

用過FB的朋友一定有發現一個有趣的功能,就是在人氣旺的粉絲團留言,有時候還沒輸入完內容前面就冒出其他的人留言回覆了,但都沒刷新頁面,其實這樣功能用setInterval()+$.ajax就能實現了,也不會很消耗user端瀏覽器效能,方法如下:


要顯示資料的內容區

<div id='test'></div>


執行$.ajax的JS檔案code


$(document).ready(function(){

//第一次讀取
 $returntrue=cartnumber();

//自動更新
if($returntrue){
setInterval(function(){ cartnumber(); }, 10000);  //預設10000毫秒自動重複執行cartnumber()函數
}
function cartnumber(){

$.ajax({

url: xoopsjsurl + '/modules/neillibrary/ajax.php',

type: 'POST',

data: { id: '1'},

success: function(response) {

$('#test').html(response);

},

error: function() {

console.log('ajax error!');

}

})

}
   return true;
});


這樣#test的內容資料就會按setInterval設定的10000豪自動更新一次,若此期間有新的資料寫入ajax會自動更新區塊內容,不用刷新瀏覽頁面,很方便實用的功能!!有需要的朋友參考看看!!


教學撰寫:徐嘉裕 Neil hsu

留言

這個網誌中的熱門文章

jquery.datepicker下拉月曆只顯示年-月的設定方法-教學撰寫:徐嘉裕Neil hsu

在CentOS7上安裝XAMPP並設定允許外部連線phpmyadmin的方法-教學撰寫:徐嘉裕Neil hsu

jQuery用.each()取代for迴圈