使用 JavaScript / jQuery 提交表单后调用函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13393817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Call a function after a form is submitted using JavaScript / jQuery
提问by Annapoorni D
I want to call a function after a form is submitted, I see we can do this in jQuery with .submit(handler function())but the method description says, the handler method will be executed just before the form is submitted. How can I actually attain this? Should I use setTimeoutafter the form is submitted or is there any other solution for this?
我想在提交表单后调用一个函数，我看到我们可以在 jQuery 中执行此操作，.submit(handler function())但是方法描述说，处理程序方法将在提交表单之前执行。我怎样才能真正做到这一点？我应该setTimeout在提交表单后使用还是有其他解决方案？
回答by adeneo
$("#myFormId").on('submit', function(e) {
e.preventDefault();
$.ajax({
type: $(this).prop('method'),
url : $(this).prop('action'),
data: $(this).serialize()
}).done(function() {
doYourStuff();
});
});
回答by Akhil Sekharan
Flow:
流动：
- window.sessionStorage['submit'] is initially an empty string.
- once you type something in the textbox, and click the submit button, the value in the textbox is saved to window.sessionStorage['submit']. That means the window.sessionStorage['submit'] is not empty anymore. it containes a value.
- the page refreshes after you submit the form.
- the onload function will check if there is anything in window.sessionStorage['submit']. if its not empty it means that the form was submitted by a user. then it reset the window.sessionStorage['submit'] to empty string again.
- window.sessionStorage['submit'] 最初是一个空字符串。
- 在文本框中键入内容并单击提交按钮后，文本框中的值将保存到 window.sessionStorage['submit']。这意味着 window.sessionStorage['submit'] 不再是空的。它包含一个值。
- 提交表单后页面会刷新。
- onload 函数将检查 window.sessionStorage['submit'] 中是否有任何内容。如果它不为空，则表示该表单是由用户提交的。然后它再次将 window.sessionStorage['submit'] 重置为空字符串。
Its using Session Storage which is supported in all the major browsers.
它使用所有主要浏览器都支持的会话存储。
<html>
<body onload="checkSubmitStatus()">
<form name="text" action="">
<input type="text" id="txtId">
<input type="submit" value="submit" onclick="storeInSession()"/>
</form>
<script type="text/javascript">
function storeInSession(){
window.sessionStorage['submit'] = document.getElementById('txtId').value;
}
function checkSubmitStatus(){
if(window.sessionStorage['submit']){
alert('The form was submitted by '+ window.sessionStorage['submit']);
window.sessionStorage['submit'] = '';
}
}
</script>
</body>
回答by Mihai
You could use plugin http://www.malsup.com/jquery/form/#ajaxSubmitand do what ever you need on the callback method success
您可以使用插件http://www.malsup.com/jquery/form/#ajaxSubmit并在回调方法成功时执行任何您需要的操作
$(document).ready(function() {
var options = {
target: '#output2', // target element(s) to be updated with server response
success: function() {
// callback code here
}
};
// bind to the form's submit event
$('#myForm2').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
});
