[英]Adding HTML to a page element with ajax onclick
為了在執行ajax請求時有一個指示符，我得到的信息是我應該將指示符和動畫gif放在頁面元素中，然后在ajax函數成功時替換數據。
如果我使用src =“ ajax-loader.html”添加指標源，則ajax調用會將其保留在原處，並且不會將其替換為數據。 如果我使用.load（“ ajax-loader.html”）添加指標源，則在ajax調用之前根本不會顯示。 如果我將它添加到beforesend事件的ajax調用中，則也不會顯示。 如果我進行兩次ajax調用，一次調用以加載指標，一次調用以加載數據，則同樣會發生。 必須有一種方法可以在此簡單代碼中顯示指標。
這是page元素的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); }, }); 使用事前
`
$.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({
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);
},
});
`
試試看：
$.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屬性使用雙引號（“）而不是單引號（'）
對於所有效果的可能解釋可能只是因為您無法設置內部HTML或加載iframe的內容，因為瀏覽器會根據其src屬性確定iframe的內容。
通常，無論如何您都不會將iframe用於異步調用，一個簡單的div應該可以工作。 使用div之前，將html設置（用html()或load()函數）並在完整的處理程序中替換它會很好。
您可以將預加載器gif添加到索引頁面。 無需單獨加載。 然后，在加載iframe時，您可以隱藏或刪除它。 您可以在此處查看演示： http : //jsfiddle.net/diode/dAdtU/ 。 單擊“加載”按鈕，即可在此處設置iframe源。 這可以在頁面准備就緒時完成，甚至可以直接設置源。 甚至觸發負載時，也會刪除預加載器。
使用ajax，您可以加載html內容，以替換/修改頁面中特定元素（div，p，ul等）的內部html。 但是不建議使用它來加載整個頁面。
將onclick事件添加到大型html表中的輸入元素會導致頁面呈現緩慢。 如何提高性能？
[英]adding onclick event to input element in large html table causes the page to render slow. how to improve the performace?
將onclick事件添加到僅在最后一個元素上起作用的新html元素
[英]Adding an onclick event to a new html element only working on the last element
將onClick事件“ html代碼”添加到預加載的ajax html標簽/頁面
[英]Add an onClick event “html code” to preloaded ajax html tag/page
如何在HTML onClick事件中將html放在頁面元素之前？
[英]How to prepend html into on page element from HTML onClick event?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.