使用 ajax onclick 将 HTML 添加到页面元素答案

【问题标题】：Adding HTML to a page element with ajax onclick使用 ajax onclick 将 HTML 添加到页面元素
【发布时间】：2011-12-27 16:55:55
【问题描述】：

为了在执行 ajax 请求时有一个指示器，我得到信息说我应该将带有动画 gif 的指示器放在页面元素中，然后在 ajax 函数成功时替换数据。

如果我使用 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);   
    },
});

使用前发送

   $.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);   
    },
});

【问题讨论】：

嗯，这很奇怪。你为什么要更新 iframe 的内容（顺便说一下，它似乎没有 src。另外，如果你想走 iframe 路线，你不能只更新 iframe 的 src 来获取内容（不需要 ajax）。另外，你可以覆盖加载器 img 而不调用单独的页面吗？

标签： javascript ajax indicator

【解决方案1】：

您可以将预加载器 gif 添加到索引页面。无需单独加载。然后在加载 iframe 时，您可以隐藏或删除它。你可以在这里看到一个演示：http://jsfiddle.net/diode/dAdtU/。单击加载按钮时，此处设置了 iframe 源。这可以在页面就绪时完成，甚至您可以直接设置源。当负载甚至被触发时，预加载器被删除。

使用 ajax，您可以加载 html 内容以替换/修改页面中特定元素的内部 html（div、p、ul 等）。但不推荐使用它来加载整个页面。

【讨论】：

没错，我可以把那张图片放在首页上。我将研究该选项作为替代方案。但是由于指示器实际上会显示在页面加载时不可见的幻灯片上。显示和隐藏指标的编码有些混乱。但如果这行得通，我可能不得不这样做。

【解决方案2】：

试试看：

$.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 属性使用双引号 (") 而不是单引号 (')

【讨论】：

我应该简单地将图像附加到元素上。但这并没有解决问题。难道是iframe不喜欢这个？我在图像周围添加了标签，但这并没有帮助。感谢您提醒我有关 src 属性的信息。

【解决方案3】：

对所有效果的一种可能解释是您无法设置内部 HTML 或加载 iframe 的内容，因为浏览器根据其 src 属性确定 iframe 的内容。

通常你不会使用 iframe 进行异步调用，一个简单的 div 应该可以工作。使用 div，在之前设置 html（使用 html() 或 load() 函数）并在完整的处理程序中替换它会很好。

【讨论】：