我有一个带有remote=true的简单表单。
实际上，这个表单在HTML对话框中，该对话框在单击提交按钮后立即关闭。
现在，在表单成功提交后，我需要在主HTML页面上进行一些更改。
我尝试使用jQuery来完成这个任务。但是这并不能确保在表单提交后获得某种响应后执行任务。
$("#myform").submit(function(event) {
// do the task here ..
});
如何附加回调函数才能在表单成功提交后执行代码？有没有办法将一些 .success 或 .complete 回调函数添加到表单中？
$("#myform").bind('ajax:complete', function() {
// tasks to do
});
而且事情运行得非常完美。
有关更具体细节，请参见此API文档。
.bind() 的第一个参数中放什么？编辑：好吧，我想应该是 click。不用管了，对不起。 :p - 4wk_我无法可靠地使用得分最高的解决方案，但发现这个方法有效。不确定是否必需，但我在 <form> 标签上没有 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>
$(this).serialize() 这一行。它让你可以使用 jQuery.ajax() 在后台提交现有表单，然后捕获服务器的回复并对其进行处理。 - Warren Young$("#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.
});
var formData = new FormData(this); - TimMVC 的另一种更简单的方法是使用 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);
});
$("#formid").ajaxForm({ success: function(){ //to do after submit } });
ajaxForm() 是您安装的第三方组件吗？它不是 jQuery 的标准组成部分。 - Warren Young