製作AJAX讀取條的方法-教學撰寫:徐嘉裕Neil hsu

如果要做一個AJAX讀取條，像是用在瀑布流讀取資料這樣的特效，方法如下：

使用JQuery AJAX 中的complete，beforeSend這兩個參數。

complete：請求完成時執行的函式(不論結果是success或error)。
beforeSend：發送請求之前會執行的函式。

//AJAX-CODE

$.ajax({
url: xoopsjsurl + '/modules/neilwenchuang/ajax.php',
type: 'POST',
data: { id: $id,
sortid:$sortid,
number:$number
},
cache:false,
ifModified :true,
async:false,
success: function(response) {

if(response=="") return false; //空值終止程式
$("#waterfallsflowformboxajax").before("<div id='waterfallsflowformboxajax"+$number+"'>"+response+"</div>");
},
beforeSend:function(){  //發送請求之前會執行的函式
$('#allrecordsimg').show();
},

complete:function(){ //請求完成時執行的函式
$('#allrecordsimg').hide();
}, 

 
error: function() {
console.log('ajax error!');
}
})

//HTML-CODE

<p id='allrecordsimg'></p>

//CSS-CODE

#allrecordsimg{
position: relative;
display: none;
left: 35%;
width: 400px;
height: 255px;
background: url(../../img/modules/neilwenchuang/201404180822583ffad.gif) no-repeat left top;
}

這樣就完成了，實際測試看看!!

如果AJAX讀取時會出現讀取動畫，讀取完成後動畫會消失，完成收工!

有需要的朋友參考看看!!

參考資料來源：https://expect7.pixnet.net/blog/post/39829979-%5B%E7%A8%8B%E5%BC%8F%5D%5Bjquery%5D-%E8%AE%93ajax%E9%81%8B%E4%BD%9C%E7%9A%84%E6%99%82%E5%80%99%EF%BC%8C%E8%B7%B3%E5%87%BAloding%E7%9A%84%E8%A8%8A

心得撰寫：徐嘉裕 Neil hsu