我使用的是数据表。我所有的代码都运行良好。现在我想让ajax加载gif。谁能帮我把ajax加载gif?这是我的代码。由于
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#dvloader").show();
oTable = $('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
} );
(document).ready(function() {
$("#btnround").click(function(){
$.ajax({
url: "ajax_request.php",
cache: false,
async: true,
data: "shape=ROUND",
success: function(html){
$(".demo_jui").html(html);
}
});
});
});
</script>
使用
ajaxStart ()
和
ajaxComplete ()
函数显示和隐藏正在加载的gif。
$("#loading").ajaxStart(function(){
$(this).show();
});
$("#loading").ajaxComplete(function(){
$(this).hide();
});
div或id为
的元素加载
有正在加载的gif。
你的最终代码应该是这样的:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#dvloader").show();
oTable = $('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
});
(document).ready(function() {
$("#btnround").click(function() {
$.ajax({
url: "ajax_request.php",
cache: false,
async: true,
data: "shape=ROUND",
success: function(html) {
$(".demo_jui").html(html);
}
});
});
$("#loading").ajaxStart(function(){
$(this).show();
});
$("#loading").ajaxComplete(function(){
$(this).hide();
});
});
</script>
希望对您有所帮助。添加beforeend和complete属性,并调用相应的函数。
$("#btnround").click(function(){
$.ajax({
url: "ajax_request.php",
cache: false,
async: true,
data: "shape=ROUND",
beforeSend : fnLoadStart,
complete : fnLoadStop,
success: function(html){
$(".demo_jui").html(html);
}
});
});
function fnLoadStart() {
$("#dvloader").show(); // this div should have loader gif
}
function fnLoadStop() {
$("#dvloader").hide();
}
这应该很容易:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#dvloader").show();
oTable = $('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
} );
(document).ready(function() {
$("#btnround").click(function(){
$(".demo_jui").html('<img src="path/to/loading.gif" />');
$.ajax({
url: "ajax_request.php",
cache: false,
async: true,
data: "shape=ROUND",
success: function(html){
$(".demo_jui").html(html);
}
});
});
});
</script>