我有一个带有 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();
});
然后，抓住数据的value。让我们假设您有一个文本框。
$("#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);
});