使用ajax onclick将HTML添加到页面元素
[英]Adding HTML to a page element with ajax onclick
问题描述
To have an indicator while doing an ajax request, I got information saying that I should have the indicator with the animated gif placed in the page element, then on success of the ajax function replace the data. 
为了在执行ajax请求时有一个指示符，我得到的信息是我应该将指示符和动画gif放在页面元素中，然后在ajax函数成功时替换数据。
If I add the indicator source with src="ajax-loader.html", the ajax call leaves it in place and doesn't replace it with the data. 如果我使用src =“ ajax-loader.html”添加指标源，则ajax调用会将其保留在原处，并且不会将其替换为数据。 If I add the indicator source with .load("ajax-loader.html"), before the ajax call it isn't shown at all. 如果我使用.load（“ ajax-loader.html”）添加指标源，则在ajax调用之前根本不会显示。 If I add it in the ajax call in the beforesend event, it isn't shown either. 如果我将它添加到beforesend事件的ajax调用中，则也不会显示。 If I make two ajax calls, one to load the indicator, one to load the data the same happens. 如果我进行两次ajax调用，一次调用以加载指标，一次调用以加载数据，则同样会发生。 There must be a way to show the indicator in this simple code. 必须有一种方法可以在此简单代码中显示指标。
This is the HTML for the page element. 这是page元素的HTML。
<iframe id="lcupco" style="position: relative; top: 5px; width: 100%; height: 200px; border: 2px solid grey; margin-bottom: 15px;"></iframe>
This is the HTML for the indicator. 这是指标的HTML。
<html>
<head></head>
<body>
<img src='images/ajax-loader.gif'/>
</body>
</html>
This is the code 这是代码
Calling .load
调用.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); }, });Using 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);
},
});
- Using two ajax calls: one for indicator and one for 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);
},
});
` `
3 个解决方案
解决方案1
0 2011-12-27 17:06:53
Try that: 试试看：
$.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);
},
});
Also dont forget that the src attribute takes double quotes (") instead of single (') 也不要忘记src属性使用双引号（“）而不是单引号（'）
解决方案2
0 2011-12-27 17:09:03
A possible explanation for all the effects could simply be that you can't set the inner HTML or load the content of an iframe, because the browser determines the content of an iframe based on its src attribute. 对于所有效果的可能解释可能只是因为您无法设置内部HTML或加载iframe的内容，因为浏览器会根据其src属性确定iframe的内容。
Usually you wouldn't use iframe for an asynchronous call anyway, a simple div should work. 通常，无论如何您都不会将iframe用于异步调用，一个简单的div应该可以工作。 With a div, setting the html before (be it with a html() or load() functions) and replacing it in complete handler will work out fine. 使用div之前，将html设置（用html()或load()函数）并在完整的处理程序中替换它会很好。
解决方案3
0 已采纳 2011-12-27 17:46:41
You can add the pre-loader gif to the index page. 您可以将预加载器gif添加到索引页面。 No need of loading it separately. 无需单独加载。 Then on the load of iframe you can hide or remove it. 然后，在加载iframe时，您可以隐藏或删除它。 You can see a demo here : http://jsfiddle.net/diode/dAdtU/ . 您可以在此处查看演示： http : //jsfiddle.net/diode/dAdtU/ 。 Here iframe source is set when load button is clicked. 单击“加载”按钮，即可在此处设置iframe源。 This can be done on page ready, or even you can set the source directly. 这可以在页面准备就绪时完成，甚至可以直接设置源。 When the load even gets triggered preloader is removed. 甚至触发负载时，也会删除预加载器。
Using ajax you can load html content for replacing/modifying the inner html of a particular element in the page ( div, p, ul etc..). 使用ajax，您可以加载html内容，以替换/修改页面中特定元素（div，p，ul等）的内部html。 But using it to load the entire page is not recommended. 但是不建议使用它来加载整个页面。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.