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

我有一个remote=true的简单表单

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

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

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

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

// do the task here ..

});

---

如何附加回调，使代码仅在表单成功提交后执行？有没有办法在表单中添加一些.success或.complete回调函数？

我认为没有像您描述的那样的回调函数

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

例如，在PHP中，您可以从表单中获取一个隐藏字段，并在该字段存在时进行一些更改

PHP:

在Jquery中实现这一点的一种方法是使用Ajax。您可以监听submit，返回false以取消其默认行为，并改用jQuery.post（）。jQuery.post有一个成功回调

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

---

您必须通过对服务器的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:对于解析表单数据，最好使用一个。它将使您的生活变得非常简单，并提供一个很好的语义来模拟实际的表单提交操作

注2:您不必使用延迟。这只是个人喜好。你同样可以做到以下几点，这也应该奏效

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

我只是这样做了-

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

         // tasks to do 


   });

一切都很顺利

---

有关详细信息，请参阅。

我无法让排名第一的升级解决方案可靠地工作，但我发现这是可行的。不确定它是否是必需的，但我在标记上没有action或method属性，这可以确保POST由$.ajax函数处理，并提供回调选项

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

<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>

...
$（文档）.ready（函数（）{
$（“#表单选择器”）.submit（函数（）{
$.ajax({
类型：“POST”，
url:“form_handler.php”，
数据：$（this）.serialize（），
成功：函数（）{
//这里是回调代码
}
})
})
})

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

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

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

这是提交代码，位于DocumentReady部分，它将按钮的onclick事件绑定到提交表单

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

以下是AjaxOptions中引用的回调

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

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

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult UploadTrainingMedia（IEnumerable文件）
{
如果（文件！=null）
{
foreach（文件中的var文件）
{
//只有一个文件…请处理它
}
返回Json（新的
{
状态代码=200，
status=“文件已上载”，
文件=”，
}，“文本/html”）；
}
其他的
{
返回Json（新的
{
状态代码=400，
status=“无法上载文件”，
文件=”，
}，“文本/html”）；
}
}

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

为什么不使用Ajax？通过jQuery Ajax函数，您可以定义这样的回调。在某些情况下，您无法使用Ajax。例如，当你想上传一个文件时。@Pere将来这里不是真的。哇。。。我刚刚学到了一些新东西。是的，从表面上看，这是最简单的解决方案。也许，它甚至是最好的。我是一个热衷于编写恐怖代码的读者，在那个博客中，杰夫·阿特伍德强调我们应该编写更少的代码，而这种方法实现了这一点。好发现。：）如果通常提交

？（我的意思是不使用Ajax）我可以在

.bind（）

的第一个参数中添加什么？编辑：嗯，我想

点击
。对不起PBWare：这将在任何ajax事件完成后启动您的函数，而不仅仅是表单提交（除非我弄错了，在这种情况下，我希望您提供一个链接，说明您在哪里找到了它）“从jQuery1.8开始，.ajaxComplete（）方法应该只附加到文档“使用普通表单，无法从我的表单中工作”，并带有一个按钮，但是按钮调用javascript$（'#formFile'）.submit（）；
ajaxForm（）
是您安装的第三方组件吗？它不是jQuery+1的标准部分。这个答案的关键是
$（this）.serialize（）
行。它允许您使用
jQuery.ajax（）
在后台提交现有表单，然后捕获服务器的回复并对其进行处理。不带分号的javascript。。。有些人只是想看着世界燃烧。不过，您的解决方案仍然有效，因此，谢谢：）请注意，
.serialize
不会在您发布的请求中包含文件输入。使用HTML5 FormData（请参阅），除非您支持旧浏览器，如IE<9Props，以使用
$（此）。serialize（）
，它解决了我的问题！您在js中引用的html中的“form_selector”是什么？这些代码是.NETC