Question

要在执行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);   
    },
});

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

`

Answer 1

试试：

$.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 属性采用双引号（“）而不是单引号（'）

Answer 2

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

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

Answer 3

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

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

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

3 个答案: