阿贾克斯替换文本与图像 [英] Ajax replace text with image

问题描述

我已经把下面的MooTools的脚本

I have put together the following mootools script

 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

heres the html

<div id="AJAX">
    <h3>Ajax Response</h3>
    <div id="log_res">exercise</div>
</div>

其使用哞1.1。

its using moo 1.1.

以上工作正常，页面加载，然后Ajax请求踢DIV ID log_res有一类AJAX加载的，而它的更新，并在其完成在格文的运动被替换无论阿贾克斯返回（ yippee的）。不过，我想提出一些自定义的HTML到的股利虽然页面加载，因为AJAX加载类是不够的，所包含的信息，我也想提出一个spinny闪光进的div虽然Ajax请求检索信息。 希望这是有道理的！

The above works fine, the page loads then the ajax request kicks in div id log_res has a class of ajax-loading whilst its updating, and when its finished the text exercise in the div is replaced with whatever the ajax has returned (yippee). But I want to put some custom HTML into the div WHILST the page is loading, because the ajax-loading class is not enough to contain the information, i also want to put a spinny flasher into the div whilst the ajax request is retrieving the information. Hope that makes sense!

推荐答案

通过MooTools的1.2，这个工程的要求：

With MooTools 1.2, this works as requested:

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，我必须挖得......其实，我懂了工作使用几乎相同的设置，你有（请注意，我用目标而不是日志，这是该函数的范围）之外定义的：

Since you are no fun and use MooTools 1.1, I must dig a little... Actually, I got it working using nearly the same setup as you have (notice I use target instead of log, which was defined outside of the scope of this function):

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();
}

这篇关于阿贾克斯替换文本与图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！