使用 mootools 提交 ajax 表单答案

【问题标题】：ajax form submit with mootools使用 mootools 提交 ajax 表单
【发布时间】：2012-01-05 12:36:46
【问题描述】：

我有一个网站，我早在 2007 年就建立了。我做了一些 ajax 的东西，它工作得很好。今天，那个网站所有者联系了我，说他注意到表单不再工作了。

我去看了一下，控制台显示提交时出现错误：拒绝设置不安全的标头“Connection”

我认为这必须是浏览器安全性或其他方面的更改，因为没有更改任何代码，并且上次我查看它时一切正常......所以我做了一些谷歌搜索，发现其他人提到了这一点，他们的解决方案是更新 mootools.. 我做了，真令人头疼，整个 API 都改变了.. 所以我修复了所有东西，看起来它应该都可以工作，但它没有。

$('application_form').addEvent('submit', function(e) {
  new DOMEvent(e).stop();

  updateText("Sending...");
  var progress_bar = $('bar');
  progress_bar.empty().addClass('ajax-loading');
  this.send({
    update: progress_bar,
    onSuccess: function(e) {
      progress_bar.removeClass('ajax-loading');
      (function() { mySlide.slideOut() }).delay(1500);
    }
  });
});

这会导致 ajax 请求转到 url [Object object]，而不是 application_form 的 action 属性中指定的实际 .php 脚本...我尝试指定一个 url 选项来告诉它不要转到 [Object object ] 但不好...

【问题讨论】：

标签： mootools

【解决方案1】：

这是一个 jsfiddle，其中包含一个基于您的工作示例。
升级你的应该不会太难。

http://jsfiddle.net/K976E/3/

这是 jsfiddle 消失时的 html 代码。

<!DOCTYPE HTML>
<html>
    <body>
        <form id='application_form' action='http://www.scoobydoo.com/cgi-bin/scoobysnack'>
            Count of Scooby Snacks: <input type='text' size='5' /><br />
            <input id='submitButton' type='submit' value='Rut Roh Shaggy!'/>            
        </form>
        <div id='bar' style='margin-top:20px'>
            Yikes!
        </div>

    </body>
</html>

这里是 javascript（放在 onLoad 中）：

new Form.Request('application_form', 'bar', {
    onSend: function(){
    updateText("Sending...");
    var progress_bar = $('bar');
    progress_bar.empty().addClass('ajax-loading');
        $('submitButton').set('value', 'Sending the form...').set('disabled', true);
    },
    onComplete: function(){
    var progress_bar = $('bar');
    progress_bar.removeClass('ajax-loading');
    //(function() { mySlide.slideOut() }).delay(1500);        
    }
});


function updateText(txt){
    // do something here...
}

...不，我没有重新启用 onComplete 中的提交按钮...

【讨论】：

传递给 Form.Request 的 'bar' 字符串是什么？
这是应该更新的任何东西的 id。从这里：link，它说：“new Form.Request(form, update[, options]);”更新为：“更新 - （混合）一个元素或元素的字符串 id 以更新响应。”我刚刚输入了您的进度条 ID，但它所做的是通过 ajax 调用快捷方式更新元素，并将元素的内部 html 替换为结果。我从不使用它。