添加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

回答

相关问题