同步Ajax加載指標

我在我的網站上使用jQuery與jQuery，需要顯示進度/加載指標。同步Ajax加載指標

我的dilemna是這樣的：

同步AJAX鎖定瀏覽器，所以我不能做任何事情（如顯示加載指示器），直到內容被返回，而此時爲時已晚
我使用JSON作爲返回數據類型正在和設置異步= true，則返回一個空應答串
我的整個框架依賴於返回類型被JSON格式

我似乎無法找到任何方法讓JS向用戶指示某事正在進行中，除了做一個alert（）。（出於某種原因，警報確實有效）。

有什麼建議嗎？

我的代碼：

var jqXHR = $.ajax(
{ 
    type: "POST", 
    url: url, 
cache: false, 
    data: params, // array of parameters 
    async: false, // responseText is empty if set to true 
    dataType: 'json', 
    error: function() 
    { 
     alert("Ajax post request to the following script failed: " + url); 
    } 

}); 

var html = jqXHR.responseText;

PHP

$return = array(); 
$return['status'] = 1; 
$return['message'] = "some html here ..."; 
echo json_encode($return);

來源

2013-05-17 little_edian

您需要調用Ajax請求之前顯示加載顯示，您可以使用回調函數和success到隱藏加載顯示器

//show here the loading display 
    $(".loading").show(); 
    setTimeout(function() { 
    var jqXHR = $.ajax({ 
     type: "POST", 
     url: url, 
     cache: false, 
     data: params, // array of parameters 
     async: false, // responseText is empty if set to true 
     dataType: 'json', 
     error: function(){ 
       alert("Ajax post request to the following script failed: " + url); 
     }, 
     success: function(){ 
       //hide loading display here 
       $(".loading").hide(); 
     } 
    }); 
    }, 0);

你需要在調用ajax函數之前使用setTimeout()延遲，因爲它甚至可以暫停加載顯示的顯示，因爲在$(".loading").show();被動畫時，同步ajax請求將被調用，並且在加載之前肯定會鎖定瀏覽器顯示動畫將完成

來源

2013-05-17 01:12:52

感謝您的建議。我試過這個，但是當其他代碼似乎運行時，我得到一個空的響應文本，嘗試從尚未運行的ajax函數獲取響應文本，並失敗。不幸的是，在所有其他代碼上設置TimeTime並不實際，因爲抓取responseText的代碼遍及整個系統...... –

好吧，我最終使用了超時並修補了我的所有代碼，並且它工作得很好。所以感謝給我一個刺激讓我在那裏（會投你，但沒有足夠的聲望點！） –

謝謝！它的工作原理... – maverabil

您可以使用JQuery全局Ajax事件處理程序。此鏈接介紹詳細介紹它們：

http://api.jquery.com/category/ajax/global-ajax-event-handlers/

$(document).ajaxStart(function() { 
    $("#loading").show(); 
}); 

$(document).ajaxComplete(function() { 
    $("#loading").hide(); 
});

來源

2013-05-17 02:05:22 Baahubali

感謝您的建議。不會悲傷地工作，看來只有在函數完成時纔會應用DOM更改（到時候已經太晚了......） –

代碼中的第一個函數可能是$（document）.ajaxSend（function（）{... ' – Gh61

嗨使用像一些事情得到在Magento後....

這是HTML

<div class="popupNews"> 
    <div class="popClose">X</div> 
     <div id="loading"><img src="<?php echo $this->getSkinUrl('images/loader.gif'); ?>" border="0" /></div> 
     <div id="result"></div> 
    </div> 
</div>

而這個jquery

var url = 'http://blabla.com/ajax'; 

jQuery.ajaxSetup({ 
    beforeSend:function(){ 
     jQuery("#loading").show(); 
    }, 
    complete:function(){ 
     jQuery("#loading").hide(); 
    } 
}); 

jQuery.ajax({ 
    url: url, 
    type: 'POST', 
    data: {id: post}, 
    success: function(data) { 
     jQuery("#result").html(data); 
    } 
});

來源

2013-10-22 16:01:21

同步Ajax加載指標

回答

相關問題