Mootools 在 ajax 请求后附加 html答案

【问题标题】：Mootools appending html after an ajax requestMootools 在 ajax 请求后附加 html
【发布时间】：2010-07-01 13:26:00
【问题描述】：

我有一个看起来像这样的 ajax 调用，

    $('campaignType').addEvent('change', function(){
  alert($('campaignType').value);
  var request = new Request({
   method: 'get',
   url: '/admin/admin_' + $('campaignType').value + '.php',
   onRequest:function() {
    alert('Request has been made, please be patient')
   },
   onComplete:function(response) {
    $('campaignForm').append(response);
   }
  }).send();
 });

基本上会发生什么取决于 `$('campaignType') 某些 HTML 从另一个文件返回的值，但是我似乎无法将 HTML 附加到我的容器中。有人愿意给我一些建议吗？

谢谢

【问题讨论】：

标签： javascript ajax mootools mootools-events

【解决方案1】：

Dimitar 的解决方案很接近，但它是一个糟糕的解决方案，因为它重新创建了整个元素内容并破坏了附加的事件处理程序。更好的解决方案是：

Element.implement({
    append: function(newhtml) {
        return this.adopt(new Element('div', {html: newhtml}).getChildren());
    }
});

这实际上是 Request.HTML 内部所做的。

【讨论】：

对于复制粘贴，在第二行的末尾添加一个 {。感谢您的示例
如果使用事件委托，则不存在事件处理器问题。

【解决方案2】：

.append 不是 mootools 中的有效元素原型。

如果您想将 html 附加到现有的，那么您可以通过在您的站点 lib/core 位中定义来使 .append 有效（如果您经常使用它，我会考虑这个）：

Element.implement({
    append: function(newhtml) {
        // silly name, does not say to me you are appending html. rename to appendHTML
        return this.set("html", this.get("html") + newhtml);
    }
});

或者在你的 onComplete 中做：

var cf = $('campaignForm');
cf.set("html", cf.get("html") + this.response.text);

玩得开心:)

【讨论】：

【解决方案3】：

如果您使用的是 mootools 1.2.4，您可以将 Request 更改为 Request.HTML 并使用 append 选项。（不确定附加选项是否在旧版本中）

$('campaignType').addEvent('change', function(){
  new Request.HTML({
    method: 'get',
    url: '/admin/admin_' + $('campaignType').value + '.php',
    append: $('campaignForm')
  }).send();
});

【讨论】：

【解决方案4】：

我认为你喜欢使用onSuccess 而不是onComplete

【讨论】：