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

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

该表单实际上位于 HTML 对话框中，只要单击 Submit 按钮，该对话框就会关闭。

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

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

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


// do the task here ..


});

如何附加回调，以便只有在表单成功提交后才执行代码？有没有办法加一些。成功或者。完成对表单的回调？

337836 次浏览
小开

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

正常的做法是使用某种服务器端语言(如 PHP)进行修改。

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

PHP:

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

在 Jquery 中实现这一点的一种方法是使用 Ajax。您可以侦听提交，返回 false 来取消默认行为，然后使用 jQuery.post ()代替。Post 有一个成功回调。

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

Http://api.jquery.com/jquery.post/

小开

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




});

一切都很顺利。

有关更多详细信息，请参见 这份 API 文件。

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

我不能得到第一反对的解决方案可靠地工作，但已经发现这个工程。不确定它是否是必需的，但是我在标记上没有操作或方法属性，这确保了 POST 由 $处理。函数，并给出回调选项。

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

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

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


提交答案