Javascript 表单完成提交后执行javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12483016/
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
executing javascript after a form finishes submitting
提问by Fallenreaper
I am trying to submit some files to my database with a form. The form has a target of a hidden iframe. When it finishes loading, i was wanting to show a message.
我正在尝试使用表单将一些文件提交到我的数据库。该表单有一个隐藏 iframe 的目标。当它完成加载时，我想显示一条消息。
$("form#formPost").submit();
customFunction();
This example seems to not finish submitting before firing off customFunction(), which is very bad for what i was designing.
这个例子似乎在触发customFunction()之前没有完成提交，这对我的设计非常不利。
Is there a way to do something which will fire when it completes sending the data? I was looking around on stackoverflow, and there arent many posts directly about this. I feel that i would have to go into the target iframe and execute the code in there when it is ready, etc. Is there a way to make it do as i want?
有没有办法做一些在完成发送数据时会触发的事情？我在stackoverflow上环顾四周，并没有很多直接关于这个的帖子。我觉得我必须进入目标 iframe 并在它准备好时执行那里的代码，等等。有没有办法让它按照我的意愿去做？
options i have tried:
我尝试过的选项：
$("form#formPost").submit(function(){ customFunction(); });
回答by Fallenreaper
Coworker Created a function which does just this.
同事创建了一个功能来执行此操作。
function SubmitWithCallback(form, frame, successFunction) {
var callback = function () {
if(successFunction)
successFunction();
frame.unbind('load', callback);
};
frame.bind('load', callback);
form.submit();
}
This function takes the form you are submitting, the forms target iframe, and an anon function which will be executed on success.
此函数采用您正在提交的表单、表单目标 iframe 和一个将在成功时执行的 anon 函数。
回答by Eric J.
If you submit the form in the traditional manner, you are essentially saying "I am done with this page. Here's a bunch of form data for you, web server, to render my next page". The web server takes the form data and returns to the browser the next page.
如果您以传统方式提交表单，您实际上是在说“我已经完成了这个页面。这里有一堆表单数据供您，Web 服务器，用于呈现我的下一个页面”。Web 服务器获取表单数据并将下一页返回给浏览器。
If you do not wish a page reload, you can submit your form using Ajax. That is quite straightforward with jQuery:
如果您不希望重新加载页面，可以使用 Ajax 提交表单。这对于 jQuery 来说非常简单：
http://api.jquery.com/jQuery.ajax/
http://api.jquery.com/jQuery.ajax/
Using Ajax, you have well-defined events when the submission completes, when it is successful, and when it errors.
使用 Ajax，您可以在提交完成、成功和出错时拥有明确定义的事件。
I would not recommend the approach of targeting a hidden iframe. Ajax is better suited for this type of processing.
我不会推荐定位隐藏 iframe 的方法。Ajax 更适合这种类型的处理。
UPDATE
更新
Here's an example of how you might structure the Ajax
这是一个关于如何构建 Ajax 的示例
<form id='myFormId'>
<!-- Form fields, hidden, file or otherwise -->
</form>
var formVars = $("#myFormId").serialize();
$.ajax({ url: ajaxUrl, cache: false, type: 'POST', data: formVars,
success: function (data) { handleSuccessCase },
error: handleAjaxError });
UPDATE 2
更新 2
Based the comments in https://stackoverflow.com/a/5513570/141172
基于https://stackoverflow.com/a/5513570/141172 中的评论
You can try:
你可以试试：
var formVars = $('#myFormId').serialize() + '&foo=' + $('#id_of_your_file_input').val()
Alternatively, you can try the plugin you suggest in your comments, which is the same solution as in the linked answer above.
或者，您可以尝试您在评论中建议的插件，这与上面链接的答案中的解决方案相同。
回答by Niet the Dark Absol
Perhaps the easiest thing to do is attach an onloadevent on the iframe. When the form has finished submitting, the event will fire.
也许最简单的方法是onload在 iframe 上附加一个事件。当表单完成提交时，事件将被触发。
