表单提交后如何做一个jQuery的callback？

我有一个简单的forms与远程=真。

这个表单实际上是一个HTML对话框，一旦点击Submitbutton就会closures。

现在，我需要在表单成功提交后，在主HTML页面上进行一些更改。

我试过这个使用jQuery。 但是这并不能确保在表单提交的某种forms的响应之后执行任务。

$("#myform").submit(function(event) { // do the task here .. }); 

如何附加一个callback，以便我的代码只有在表单成功提交后才能执行？ 无论如何，添加一些.success或.completecallback的forms？

Answer 1

我只是做了这个 –

  $("#myform").bind('ajax:complete', function() { // tasks to do }); 

而且事情完美。

有关更多具体细节，请参阅此api文档 。

Answer 2

我无法得到最好的解决scheme工作可靠，但已经发现这个作品。 不知道是否需要，但我没有标签上的动作或方法属性，这可以确保POST由$ .ajax函数处理，并为您提供callback选项。

 <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 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：为了parsing表单的数据，最好使用一个插件 。 它会使你的生活变得非常简单，并提供一个模仿实际表单提交行为的好语义。

注2：您不必使用延期。 这只是个人喜好。 你也可以做下面的事情，它也可以工作。

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

Answer 4

我不相信有一个像你所描述的callback函数。

这里正常的做法是使用一些服务器端语言（如PHP）进行更改。

在PHP中，您可以从表单中获取隐藏字段，并在出现的情况下进行一些更改。

PHP：

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

在Jquery中使用Ajax的一种方法是使用Ajax。 你可以听取提交，返回false取消其默认行为，并使用jQuery.post（）来代替。 jQuery.post有一个成功的callback。

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

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

Answer 5

对于MVC，这是一个更简单的方法。 您需要使用Ajax表单并设置AjaxOptions

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

这里是提交代码，这是在文档就绪部分，并绑定button的onclick事件来提交表单

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

这里是AjaxOptions中引用的callback

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

Answer 6

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