如何在表單提交後執行jquery回調？

Question

我有一個簡單的形式與遠程=真。

此表單實際上是一個HTML對話框，只要點擊Submit按鈕，該對話框就會關閉。

現在，我需要在表單成功提交後，在HTML主頁上進行一些更改。

我試過這個使用jQuery。但是這並不能確保任務在表單提交的某種形式的響應之後得到執行。

$("#myform").submit(function(event) { 

// do the task here .. 

}); 

如何附加回調，以便我的代碼只有在表單成功提交後才能執行？無論如何要添加一些.success或.complete回調的形式？

Answer 1

我只是做了這一點 -

$("#myform").bind('ajax:complete', function() { 

     // tasks to do 


    }); 

，事情完美。

有關更多具體細節，請參閱this api documentation。

Answer 2

我不相信有一個回調函數就像你描述的那樣。

這裏正常的做法是使用一些服務器端語言（如PHP）進行修改。

在PHP中，您可以從窗體中獲取隱藏字段，如果存在，請進行一些更改。

PHP：

$someHiddenVar = $_POST["hidden_field"]; 
    if (!empty($someHiddenVar)) { 
     // do something 
    } 

一種方式去了解它在jQuery是使用Ajax。您可以偵聽提交，返回false以取消其默認行爲，並使用jQuery.post（）代替。 jQuery.post有一個成功回調。

$.post("test.php", $("#testform").serialize(), function(data) { 
    $('.result').html(data); 
}); 

http://api.jquery.com/jQuery.post/

Answer 3

你必須有一個AJAX調用服務器手工做的事情。這將需要你重寫表單。

但是不要擔心，這是小菜一碟。這裏有一個關於你將如何去與你的形式工作的概述：

• 覆蓋默認提交操作（感謝在事件傳入的對象，具有preventDefault方法）
• 搶在所有必要的值形式
• 斷火的HTTP請求
• 處理請求

首先響應，你就必須取消表單提交的動作，像這樣：

$("#myform").submit(function(event) { 
    // Cancels the form's submit action. 
    event.preventDefault(); 
}); 

然後，抓取數據的值。我們假設你有一個文本框。

$("#myform").submit(function(event) { 
    event.preventDefault(); 
    var val = $(this).find('input[type="text"]').val(); 
}); 

然後發出請求。我們假設它是一個POST請求。

$("#myform").submit(function(event) { 
    event.preventDefault(); 
    var val = $(this).find('input[type="text"]').val(); 

    // I like to use defers :) 
    deferred = $.post("http://somewhere.com", { val: val }); 

    deferred.success(function() { 
     // Do your stuff. 
    }); 

    deferred.error(function() { 
     // Handle any errors here. 
    }); 
}); 

而這應該做到這一點。

注2：對於解析表單數據，最好使用plugin。它會讓你的生活變得非常簡單，並且提供一個模仿實際表單提交動作的好語義。

注2：您不必使用延遲。這只是個人喜好。你也可以做到以下幾點，它也應該起作用。

$.post("http://somewhere.com", { val: val }, function() { 
    // Start partying here. 
}, function() { 
    // Handle the bad news here. 
}); 

Answer 4

$("#formid").ajaxForm({ success: function(){ //to do after submit } }); 

Answer 5

我無法得到頭號upvoted解決方案，工作可靠，但已經發現這個作品。不知道是否需要，但是我沒有標籤上的動作或方法屬性，這確保POST由$ .ajax函數處理，併爲您提供回調選項。

<form id="form"> 
... 
<button type="submit"></button> 
</form> 

<script> 
$(document).ready(function() { 
    $("#form_selector").submit(function() { 

    $.ajax({ 
    type: "POST", 
     url: "form_handler.php", 
     data: $(this).serialize(), 
     success: function() { 
     // callback code here 
     } 
    }) 

    }) 
}) 
</script> 

Answer 6

對於MVC來說，這是一個更簡單的方法。 你需要使用Ajax的形式，並設置AjaxOptions

@using (Ajax.BeginForm("UploadTrainingMedia", "CreateTest", new AjaxOptions() { HttpMethod = "POST", OnComplete = "displayUploadMediaMsg" }, new { enctype = "multipart/form-data", id = "frmUploadTrainingMedia" })) 
{ 
    ... html for form 
} 

這裏是提交代碼，這是在文件準備部分和領帶按鈕的onclick事件提交表單

$("#btnSubmitFileUpload").click(function(e){ 
     e.preventDefault(); 
     $("#frmUploadTrainingMedia").submit(); 
}); 

這裏是在AjaxOptions引用的回調

function displayUploadMediaMsg(d){ 
    var rslt = $.parseJSON(d.responseText); 
    if (rslt.statusCode == 200){ 
     $().toastmessage("showSuccessToast", rslt.status); 
    } 
    else{ 
     $().toastmessage("showErrorToast", rslt.status); 
    } 
} 

在MVC它看起來像這樣

控制器方法

[HttpPost] 
[ValidateAntiForgeryToken] 
public JsonResult UploadTrainingMedia(IEnumerable<HttpPostedFileBase> files) 
{ 
    if (files != null) 
    { 
     foreach (var file in files) 
     { 
      // there is only one file ... do something with it 
     } 
     return Json(new 
     { 
      statusCode = 200, 
      status = "File uploaded", 
      file = "", 
     }, "text/html"); 
    } 
    else 
    { 
     return Json(new 
     { 
      statusCode = 400, 
      status = "Unable to upload file", 
      file = "", 
     }, "text/html"); 
    } 
}