表单提交后如何进行Jquery回调?


119

我有一个简单的表单,其中remote = true。

此表单实际上位于HTML对话框中,单击“提交”按钮后,该对话框将立即关闭。

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

我尝试使用jQuery。但是,这不能确保任务在表单提交的某种形式的响应之后得到执行。

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

// do the task here ..

});

如何附加回调,以便仅在成功提交表单后执行我的代码?有什么方法可以向表单添加一些.success或.complete回调?


您为什么不使用Ajax?使用jQuery Ajax函数,您可以定义此类回调。
davidbuzatto 2012年

12
davidbuzatto,有些情况下您不能使用ajax。例如,当您要上传文件时。
Pere 2013年

3
@Pere将来不正确。
SparK

Answers:


119

我只是这样做-

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

         // tasks to do 


   });

事情进行得很顺利。

有关更多详细信息,请参阅此api文档


3
哇...我刚学到新东西。是的,从它的外观来看,这是最简单的解决方案。也许,这甚至是最好的。我是《 Coding Horror》的狂热读者,在该博客中,Jeff Attwood强调我们应该编写更少的代码,而这种方法可以实现这一目标。好发现。:)
萨尔(Sal)

7
如果<form>通常提交?(我的意思是不支持Ajax)我可以在第一个参数中输入.bind()什么?编辑:恩,我猜click。Nvm,对不起。:p
4wk_

9
当心:这将在任何 ajax事件完成后触发您的功能,而不仅仅是您的表单提交(除非我弄错了,在这种情况下,我希望您提供找到该内容的链接)
DMac毁灭者

18
“从jQuery 1.8开始,.ajaxComplete()方法应仅附加到文档中”
Meredith

6
使用正常的Form,并没有通过按钮向表单工作,但是按钮调用了javascript $('#formFile')。submit();
丹尼尔(Daniel)

35

我无法获得排名靠前的解决方案来可靠地工作,但发现它可行。不知道是否需要它,但是标签上没有动作或方法属性,以确保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>

1
+1。答案的关键是$(this).serialize()线。它使您可以jQuery.ajax()在后台提交现有表单,然后从服务器获取答复并对其进行处理。
沃伦·杨

15
没有分号的javascript ...有些人只想观看世界燃烧。虽然您的解决方案有效,所以谢谢您:)
viggity 2014年

2
请注意,.serialize您的POSTed请求中不包括文件输入。除非您支持IE <9
brichins

使用道具$(this).serialize(),解决了我的问题!
gnclmorais 2016年

在js中引用的html中的“ form_selector”是什么?
凯文·梅雷迪斯

23

您必须通过对服务器的AJAX调用手动执行操作。这也将要求您覆盖表格。

但是不用担心,这只是小菜一碟。以下是有关如何使用表单的概述:

  • 覆盖默认的Submit操作(由于传入的事件对象具有一个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.
});

2
很好的样本。如何使用文件上传(多部分/表单数据)执行相同的操作?
亚当W

11

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

2
这些代码是.Net代码,在问题中从未指定。
MrMins

13
确实,这不是拒绝投票的充分理由。答案有效,并且可能会帮助面临相同问题的.NET开发人员。
edepperson 2014年

我喜欢这个主意,但由于某种原因,回调无法触发。控制器方法是否必须返回JsonResult?我的控制器方法当前返回一个ActionResult。
mattpm

7

我不相信有像您描述的那样的回调函数。

在这里正常的做法是使用某些服务器端语言(例如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/


0

在提交表单之前,将调用表单的“提交时”处理程序。我不知道提交表单后是否有要调用的处理程序。在传统的非Java语言意义上,表单提交将重新加载页面。


除非表单提交重定向到文件下载,否则页面将保持不变。我无法使用JavaScript提交,因为Ajax请求无法启动文件下载(没有锚标签游戏),但是我也无法告诉用户等待或一旦他们拥有文件就清理...
kitsu .eb

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

3
ajaxForm()你已经安装了第三方组件?它不是jQuery的标准部分。
沃伦·杨
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.