添加HTML到帶有Ajax的頁面元素onclick

爲了在做Ajax請求時有一個指示器，我得到了一些信息，說我應該在page元素中放置帶有動畫gif的指示器，然後在ajax函數成功替換數據。添加HTML到帶有Ajax的頁面元素onclick

如果我添加指標源與src =「ajax-loader.html」，ajax調用將它留在原地並不會將其替換爲數據。如果我在.load（「ajax-loader.html」）中添加指示符源，則在ajax調用之前根本不顯示它。如果我將它添加到beforesend事件中的ajax調用中，它也不會顯示。如果我做兩個Ajax調用，一個調用指示器，一個調用這個調用的數據。在這個簡單的代碼中必須有一種方法來顯示指標。

這是頁面元素的HTML。

<iframe id="lcupco" style="position: relative; top: 5px; width: 100%; height: 200px; border: 2px solid grey; margin-bottom: 15px;"></iframe>

這是此指示器的HTML。

<html> 
<head></head> 
<body> 
    <img src='images/ajax-loader.gif'/> 
</body> 
</html>

這是代碼

調用.load

$(document).ready(function(){ 
$('#lcupco').load("ajax-loader.html");}); 

$.ajax({ 
    url: 'luxcal/index.php?cP=40', 
    cache: false, 
    async: true, 
    success: function(data) { 
    $('#lcupco').html(data); 
    }, 
});

使用beforesend

$.ajax({ 
      url: 'luxcal/index.php?cP=40', 
      cache: false, 
      async: true, 
      beforeSend: function() { 
       $('#lcupco').load('ajax-loader.html'); 
       // $('#lcupco').html('<html>Initializing calendar...</html>'); //simple text didn't load either. 
      }, 
      success: function(data) { 
      $('#lcupco').html(data); 
      }, 
    });

使用兩個Ajax調用：一個指示器和一個用於數據

$.ajax({ 
    url: 'ajax-loader.html', 
    cache: false, 
    async: true, 
    success: function(data) { 
    $('#lcupco').html(data); 
    }, 
}); 


$.ajax({ 
    url: 'luxcal/index.php?cP=40', 
    cache: false, 
    async: true, 
    beforeSend: function() { 
     $('#lcupco').html('<html>Initializing calendar...</html>'); 
    }, 
    success: function(data) { 
    $('#lcupco').html(data); 
    }, 
});

來源

2011-12-27 user823527

嗯，這是各種奇怪的。你爲什麼要更新一個iframe的內容（這似乎沒有一個src的，另外，如果你想要去iframe的路線，你能不能更新iframe的src來獲取內容（不需要ajax）。另外，你可以在沒有調用單獨頁面的情況下覆蓋載入器img嗎？ – JoeyP 2011-12-27 17:07:24

您可以將預加載器gif添加到索引頁面。無需單獨加載它。然後在iframe的加載中，您可以隱藏或刪除它。你可以在這裏看到一個演示：http://jsfiddle.net/diode/dAdtU/。點擊加載按鈕時，此處設置iframe源。這可以在頁面準備就緒，甚至可以直接設置源代碼。當負載甚至被觸發時，預加載器被刪除。

使用ajax，你可以加載html內容來替換/修改頁面中特定元素的內部html（div，p，ul等）。但不建議使用它來加載整個頁面。

來源

2011-12-27 17:46:41 Diode

這是真的，我可以把這張圖片放在首頁。選項作爲替代選項，但是由於指標實際上會顯示在頁面加載時不可見的滑動頁面中，顯示和隱藏指示符的代碼有點雜亂，但如果可行的話，我可能必須這樣做。 – user823527 2011-12-27 18:01:49

試一下：

$.ajax({ 
       url: 'luxcal/index.php?cP=40', 
       cache: false, 
       async: true, 
       beforeSend: function() { 
        $('#lcupco').append($('<img class="indic" src="images/ajax-loader.gif"/>')); 
       }, 
       success: function(data) { 
        $('#lcupco', '.indic').remove(); 
        $('#lcupco').html(data); 
       }, 
     });

而且不要忘記，在SRC屬性採用雙引號（「），而不是單引號（'）

來源

2011-12-27 17:06:53 fso

我應該簡單地將圖像附加到元素上是合理的，但這並不能解決問題。 iframe不喜歡這個嗎？我在圖片上添加了標籤，但這並沒有幫助，謝謝你提醒我關於src屬性 – user823527 2011-12-27 17:59:27

所有影響的可能的解釋可能只是你不能設置內部HTML或加載一個iframe的內容，因爲瀏覽器根據其屬性src來確定iframe的內容。

無論如何你通常不會使用異步調用iframe，一個簡單的div應該可以工作。使用div，在設置html之前（使用html()或load()函數）並將其替換爲完整的處理程序可以很好地工作。

來源

2011-12-27 17:09:03

添加HTML到帶有Ajax的頁面元素onclick

回答

相關問題