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

Question

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

此表单实际上位于HTML对话框上,一旦单击"提交"按钮,该对话框就会关闭.

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

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

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

// do the task here ..

});

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

Answer 1

我这样做了 -

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

         // tasks to do 


   });

事情很完美.

有关更多具体细节,请参阅此api文档.

Answer 2

我无法获得第一个可靠的工作解决方案,但发现这是有效的.不确定是否需要,但我没有标记上的action或method属性,这确保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 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:为了解析表单的数据,最好使用插件.它将使您的生活变得非常简单,并提供一个模仿实际表单提交操作的漂亮语义.

注2:您不必使用延期.这只是个人偏好.您可以同样执行以下操作,它也应该可以工作.

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

Answer 4

对于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 5

我不相信有一个像你描述的那样的回调函数.

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