[英]How to do a Jquery Callback after form submit?
我有一个带有remote = true的简单表单。
此表单实际上位于HTML对话框上,一旦单击“提交”按钮,该对话框就会关闭。
现在,我需要在表单成功提交后对主HTML页面进行一些更改。
我尝试使用jQuery。 但这并不能确保在表单提交的某种形式的响应之后执行任务。
$("#myform").submit(function(event) {
// do the task here ..
});
如何附加回调,以便我的代码只有在成功提交表单后才能执行? 有没有办法在表单中添加一些.success或.complete回调?
我这样做了 -
$("#myform").bind('ajax:complete', function() {
// tasks to do
});
事情很完美。
有关更多具体细节,请参阅此api文档 。
我无法获得第一个可靠的工作解决方案,但发现这是有效的。 不确定是否需要,但我没有标记上的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>
您必须通过对服务器的AJAX调用手动执行操作。 这将要求您也覆盖表单。
但别担心,这是小菜一碟。 以下是您将如何处理表单的概述:
preventDefault
方法) 首先,您必须取消表单提交操作,如下所示:
$("#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.
});
对于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");
}
}
我不相信有一个像你描述的那样的回调函数。
这里正常的是使用一些服务器端语言(如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);
});
在提交表单之前调用表单的“提交时”处理程序。 我不知道在提交表单后是否有要调用的处理程序。 在传统的非Javascript意义上,表单提交将重新加载页面。
$("#formid").ajaxForm({ success: function(){ //to do after submit } });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.