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

This won't work, it breaks the asynchronous nature of XHR (it's *A*JAX, heh).

The way it works is this:

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

By the time the onComplete arrives and calls .stop(), the parent function execution has exited and failed to stop the event, it has already bubbled... XHR is non-blocking!

you have 2 patterns you can do to work around that:

1. always stop event, do something extra in onComplete

essentially, whatever the XHR passes to your onComplete can let you determine the success/failure of your operation and you can call another function, fire an event or do what you need to do (eg, transition page or display validation errors on screen or whtever).

2. use sync AJAX (anti-pattern)

you can actually make your XHR blocking if you wanted to so that in this execution context you can set a variable or stop the event from the onComplete - do so by passing async: false to your Request constructor options.

I would definitely not recommend 2 unless you are doing something like username availability checker onBlur/onChange that needs to block the thread before they submit. And even then, you can do it gracefully w/o this.

edit as per request, here is an example: 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();
});

this has been tailored for the jsfiddle api for ajax testing but you get the idea. since you evalResponse, your response can also set variables - though I don't remember what the scope of evluation will be - it may be the global object and not the inner scope of the submit function.

once again, this is totally wrong, use sparringly. you need to change over to a proper event based setup.

http://jsfiddle.net/dimitar/du5s4/2/ - same thing but w/o the async hack. 

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 に答える