1

好吧，我有这个脚本，我在提交请求时设置了用于验证我的输入值的 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();
    }


});


});
4

1 回答 1

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 量身定制的，但你明白了。由于您评估响应，您的响应也可以设置变量 - 虽然我不记得评估的范围是什么 - 它可能是全局对象而不是提交函数的内部范围。

再一次，这是完全错误的，谨慎使用。您需要切换到正确的基于事件的设置。

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();
});
于 2013-01-22T22:45:29.090 回答