Javascript Mootools事件停止

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的異步性（這是* 一個 * JAX，嘿嘿）。

它的工作方式是這樣的：

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

由onComplete到達並調用.stop()，父函數執行已退出，並未能阻止事件的時候，它已經起泡...... XHR是非阻塞！

你有2種模式，你可以做的工作圍繞：

1.隨時停止活動，做些額外的事情中的onComplete

本質，無論XHR傳遞給你的onComplete可以讓你決定成功/你的操作失敗，你可以調用另一個函數，觸發一個事件或做你需要做的事情（例如，在屏幕或whtever上轉換頁面或顯示驗證錯誤）。

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

你其實可以讓你的XHR封鎖，如果你想使這個執行上下文，你可以設置一個變量或停止從onComplete事件 - 這樣做通過將async: false傳遞給您的請求構造器選項。

我肯定不會推薦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，你的迴應也可以設置變量 - 儘管我不記得範圍是什麼 - 它可能是全局對象而不是提交函數的內部範圍。

再一次，這是完全錯誤的，使用爭吵。您需要切換到適當的基於事件的設置。

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(); 
});