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

Question

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

这个表单实际上是在一个 HTML Dialog 上，一旦单击 Submit 按钮就会关闭。

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

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

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

// do the task here ..

});

如何附加回调，以便我的代码只有在表单提交成功后才会执行？有没有办法在表单中添加一些 .success 或 .complete 回调？

Answer 1

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

Answer 2

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

Answer 3

我刚刚这样做了 -

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

         // tasks to do 


   });

一切都很顺利。

请参阅this api documentation 了解更多详细信息。

Answer 4

我无法让排名第一的解决方案可靠地工作，但我发现这是可行的。不确定它是否需要，但我在标签上没有操作或方法属性，这确保 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 5

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

Answer 6

您必须通过对服务器的 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 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/