ajax表单提交与mootools

时间:2012-01-05 03:54:50

标签: mootools

我有一个我在2007年建立的网站..我做了一些ajax的东西,它工作得很好..今天,该网站所有者联系我并说他注意到表格不再有效。

我去看看,控制台显示提交时收到错误: 拒绝设置不安全的标题“连接”

我认为这必须是浏览器安全性的改变或其他什么,因为没有代码发生变化,上次我看到它时一切正常....所以我做了一些谷歌搜索并发现其他人提到这一点,他们的解决方案是更新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] ]但没有好处......

1 个答案:

答案 0 :(得分:0)

这是一个基于你的工作实例的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中重新启用提交按钮...