1。总是停止事件，在onComplete中做一些额外的事情

Question

好吧，我有这个脚本，我已经设置了提交请求php文件，用于验证我的输入值...我已经设置，当它没有验证时，回应它的正确方法未经验证，现在我想在我的请求中得到响应，这是错误响应停止提交..这是脚本，它确实发送请求并返回响应，但它不会停止提交...

我已经这样做但现在我需要在完成所有操作时弹出确认消息，我想在弹出消息时停止执行表单，如果用户单击是继续表单...我用fireEvent尝试了这个，但它不会工作......帮帮忙！

window.addEvent('domready', function(){

var form=document.adminForm;
form.addEvent('submit', function(e){
var success = false;    

var dataString="date=" + document.getElementById("date").value + "&start=" + document.getElementById("start").value + "&end=" + document.getElementById("end").value;


var requestData = new Request ({
        url: '/provjera.php',
        method:'POST',
        async:false,

        data:dataString,
        onComplete: function(responseText){
                var requestData2 = new Request({
                    url:'/posalji.php',
                    method:'POST',
                    data:dataString,
                    onComplete:function(responseText){

                    }

                });
                requestData2.send();


            success= responseText == 'NO ERROR';
            if(responseText == 'NO ERROR'){


            }else{
                alert("FAIL");
            }

        }
    });

    requestData.send();
    if(success){
        var result=confirm("Are you sure!?");
    e.stop();
    if(result){
    form.fireEvent("submit");  
    }

    }else{
            e.stop();
    }


});


});

Answer 1

这不起作用，它打破了XHR的异步性质（它是* A * JAX，呵呵）。

它的工作方式是：

[form]
[submit event]
\->[function]->[xhr]->[onComplete function much later]->[e.stop() not applicable]
            \->[function continues and terminates]

当onComplete到达并调用.stop()时，父函数执行已退出并且无法停止事件，它已经冒泡... XHR是非阻塞的！

你有两种模式可以解决这个问题：

1。总是停止事件，在onComplete中做一些额外的事情

基本上，无论XHR传递给您的onComplete，您都可以让您确定操作的成功/失败，并且可以调用其他函数，触发事件或执行您需要执行的操作（例如，转换页面或在屏幕或白色上显示验证错误。）

2。使用同步AJAX（反模式）

如果您愿意，您可以实际进行XHR阻止，以便在此执行上下文中设置变量或从onComplete停止事件 - 通过将async: false传递给Request构造函数来执行此操作选项。

我绝对不会推荐2，除非你做的是像用户名可用性检查器onBlur/onChange那样需要在提交之前阻塞线程。即便如此，你也可以优雅地做到这一点。

根据请求

修改，以下是一个示例：http://jsfiddle.net/dimitar/du5s4/

var form = document.id('adminForm');

form.addEvent('submit', function (e) {
    var success = false;

    // simulate a server response of two types.
    this.getElement('input[name=html]').set('value', ['success','error'].getRandom());

    var requestData = new Request({
        url: '/echo/html/',
        method: 'post',
        async: false,
        data: this,
        onComplete: function (responseText) {
            // if server returned success, don't stop the event.                                          
            success = this.response.text == 'success';
            console.log(success);
        }
    }).send();

    success || e.stop();
});

这是针对ajax测试的jsfiddle api量身定制的，但你明白了。因为你的evalResponse，你的响应也可以设置变量 - 虽然我不记得evluation的范围是什么 - 它可能是全局对象而不是提交函数的内部范围。

再次，这是完全错误的，使用陪练。您需要切换到适当的基于事件的设置。

http://jsfiddle.net/dimitar/du5s4/2/ - 同样的事情，但没有异步黑客。

var form = document.id('adminForm');

form.addEvent('submit', function (e) {
    e && e.stop && e.stop();

    var self = this;

    // simulate a server response of two types.
    this.getElement('input[name=html]').set('value', ['success','error'].getRandom());

    var requestData = new Request({
        url: '/echo/html/',
        method: 'post',
        data: this,
        onComplete: function (responseText) {
            // if server returned success, 
            // call something like form.submit();                                          
            this.response.text == 'success' && self.submit();
            console.log(this.response.text);
        }
    }).send();
});

Javascript Mootools事件停止

1 个答案:

1。总是停止事件，在onComplete中做一些额外的事情

2。使用同步AJAX（反模式）