Ajax заменить текст с изображением
-
04-07-2019 - |
Вопрос
Я собрал следующий скрипт mootools
window.addEvent('domready', function() {
var shouts = "timed.php";
var log = $('log_res');
function updateData (url,target)
{
new Ajax(url,{
method: 'get',
update: $(target),
onComplete: function() {
log.removeClass('ajax-loading');} }).request();
log.empty().addClass('ajax-loading');
}
var update = function(){ updateData ( shouts, 'log_res' ); };
update(); // call it immediately
update.periodical(10000); // and then periodically
});
вот HTML
<div id="AJAX">
<h3>Ajax Response</h3>
<div id="log_res">exercise</div>
</div>
использует moo 1.1.
Вышеприведенное работает отлично, страница загружается, затем запрос ajax запускается в div id id log_res имеет класс ajax-loading во время его обновления, и после его завершения текстовое упражнение в div заменяется тем, что вернул ajax ( Yippee). Но я хочу поместить некоторый пользовательский HTML-код в div, пока страница загружается, потому что класса ajax-loading недостаточно для хранения информации, я также хочу поместить вращающуюся флешку в div, пока запрос ajax получает информацию , Надеюсь, что это имеет смысл!
Решение
В MooTools 1.2 это работает в соответствии с запросом:
function updateData (url, target)
{
var target = $(target);
target.empty().addClass('ajax-loading');
target.innerHTML = "Loading...";
new Request({
url: url,
method: 'get',
onComplete: function(responseText) {
target.removeClass('ajax-loading');
target.innerHTML = responseText;
}
}).send();
}
Поскольку вам неинтересно и вы пользуетесь MooTools 1.1, я должен немного покопаться ... На самом деле, я получил его, используя почти ту же настройку, что и вы (обратите внимание, я использую target
вместо < code> log , который был определен вне области действия этой функции):
function updateData (url, target)
{
var target = $(target);
target.empty().addClass('ajax-loading');
target.innerHTML = "Loading...";
new Ajax(url, {
method: 'get',
update: target,
onComplete: function() {
target.removeClass('ajax-loading');
}
}).request();
}
Другие советы
Разве вы не можете сделать что-то подобное:
function updateData (url, target)
{
var target = $(target);
target.innerHTML = 'Please wait...';
//and the rest of the function
}