Ajax 用图像替换文本 [英] Ajax replace text with image

问题描述

我整理了以下 mootools 脚本

 window.addEvent('domready', function() {var 喊叫 = "timed.php";var log = $('log_res');功能更新数据(网址，目标){新的 Ajax(网址，{方法:'获取'，更新:$(目标)，onComplete:函数(){log.removeClass('ajax-loading');} }).request();log.empty().addClass('ajax-loading');}var update = function(){ updateData(大喊，'log_res')；};更新();//立即调用更新.定期(10000)；//然后定期});

这里是 html

<h3>Ajax 响应</h3><div id="log_res">练习</div>

它使用 moo 1.1.

上述工作正常，页面加载然后ajax请求启动div id log_res在更新时有一个ajax加载类，当它完成时，div中的文本练习被替换为ajax返回的任何内容(伊皮).但是我想在页面加载时将一些自定义 HTML 放入 div 中，因为 ajax 加载类不足以包含信息，我还想在 ajax 请求检索信息的同时将一个旋转的闪光器放入 div.希望这是有道理的！

解决方案

使用 MooTools 1.2，这可以按要求工作:

function updateData (url, target){var 目标 = $(目标);target.empty().addClass('ajax-loading');target.innerHTML = "加载中...";新请求({网址:网址，方法:'获取'，onComplete:函数(响应文本){target.removeClass('ajax-loading');target.innerHTML = responseText;}}).发送();}

既然你不好玩并且使用 MooTools 1.1，我必须稍微挖掘一下......实际上，我使用几乎与你相同的设置让它工作(注意我使用 target 而不是 log，这是在这个函数的范围之外定义的):

function updateData (url, target){var 目标 = $(目标);target.empty().addClass('ajax-loading');target.innerHTML = "加载中...";新的 Ajax(网址，{方法:'获取'，更新:目标，onComplete:函数(){target.removeClass('ajax-loading');}}).要求();}

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

 });

heres the html

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

its using moo 1.1.

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!

解决方案

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

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

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