JavaScript/jQuery暫停功能，然後再次觸發

我有一個表單，一旦有人點擊「提交」，就會觸發一個Ajax，並使用e.preventDefault();，這樣表單實際上不會提交。JavaScript/jQuery暫停功能，然後再次觸發

我的問題：我確實希望將表單提交給服務器，但只有在Ajax回來後才能成功。

因此，作爲一個例子，我想實現以下情形：

用戶點擊「提交」
阿賈克斯被觸發發送一些信息，而用戶仍然在頁面上。
阿賈克斯已經回來了，我們現在可以開火它的success:功能。
成功功能被激發，網站上的form data被提交給服務器。

的HTML：

<form name="demoFiler" action="save/uploadCreate.php" method="POST" enctype="multipart/form-data"> 

     //Some inputs, checkboxes radios etc. 

     <input type="submit" name="submitHandler" id="submitHandler" value="Upload" class="buttonUpload hideButton" /> 

    </form>

的JavaScript：

document.getElementById(this.config.form).addEventListener("submit", submitMe, false); 

    function submitMe(e){ 
    e.stopPropagation(); e.preventDefault(); 

    //Necessary vars for the 'data' defined here 

    $.ajax({ 
     type:"POST", 
     url:this.config.uploadUrl, 
     data:data, 
     cache: false, 
     contentType: false, 
     processData: false, 
     success:function(rponse){ 
         //This is where we need our Success function to SUBMIT the form using uploadCreate.php 
     } 
    }); 

    }

來源

2013-08-03 user1775598

這真的不是正確的做事方式。讓AJAX調用完成表單的所有工作，或者返回錯誤。如果返回指示POST成功，則可以將頁面重新加載到表單目標。通過同步AJAX調用暫停瀏覽器是可能的，但通常被認爲是糟糕的用戶體驗。 – Pointy

嗯所以只需通過Ajax或uploadCreate.php發佈一切，而不是部分通過其中一個？ – user1775598

是的。另一種選擇是忘記AJAX，然後發佈表單。這樣，在這兩種情況下你只需要做一個HTTP請求，而不是在你成功的時候執行兩次。請注意，依賴兩個單獨的HTTP請求之間的表單數據的有效性狀態仍然有效是有風險的。 – Pointy

綁定按鈕，一個點擊事件而不是表單提交事件，然後觸發.submit函數在success ajax回調中的表單元素上。

$("#submitHandler").click(function(e) { 
    e.preventDefault(); 

    //Fill "data" variable 
    var data = {}; 

    //set the url 
    var url = "someurl"; 

    $.ajax({ 
    type:"POST", 
    url:url, 
    data:data, 
    cache: false, 
    contentType: false, 
    processData: false, 
    success:function(rponse){ 
     //test rponse then do below. 
     $("form[name=demoFiler]").submit(); 
    } 
    }); 
});

來源

2013-08-03 15:38:28

這個場景最簡單的答案謝謝:) – user1775598

由於您使用jQuery已經，你可以試試：

$('#'+this.config.form).submit(function(e) { 
    var $this = $(this); 
    e.stopPropagation(); 
    e.preventDefault(); 

    //Necessary vars for the 'data' defined here 

    $.ajax({ 
     type:"POST", 
     url:this.config.uploadUrl, 
     data:data, 
     cache: false, 
     contentType: false, 
     processData: false, 
     success:function(rponse) { 
      // do something with rponse 
      $this.off('submit').submit(); // unbind the handler and submit 
     } 
    }); 
}

來源

2013-08-03 15:35:13 David

JavaScript/jQuery暫停功能，然後再次觸發

回答

相關問題