javascript - Ajax 用图像替换文本

Question

我整理了以下 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 log_res 在更新时有一个 ajax-loading 类，当它完成时，div 中的文本练习被替换为 ajax 返回的任何内容（yippee）。但是我想在页面加载时将一些自定义 HTML 放入 div，因为 ajax-loading 类不足以包含信息，我还想在 ajax 请求检索信息时将一个 spinny flasher 放入 div . 希望这是有道理的！

Answer 1

使用 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而不是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();
}

Answer 2

你能不能做这样的事情：

function updateData (url, target)
{
  var target = $(target);
  target.innerHTML = 'Please wait...';

  //and the rest of the function
}