javascript - Jquery:当用户停止表单提交时如何处理 "stop/cancel"事件？

Question

我找到了这个问题，但没有得到回答:Is there a jQuery event that I can monitor if form submission is cancelled?

所以如果用户提交一个表单，而它正在加载用户按下“esc”，或者点击浏览器的“停止”按钮，我想调用一个函数，这可能吗？

注意:我知道我们可以绑定(bind)“esc”按钮，但是如果用户通过浏览器的“停止/取消”按钮停止提交怎么办？

是否有 JavaScript 或 jquery 可能的解决方案？

编辑:

我知道我们可以通过 XHR (json/ajax) 帖子处理这个问题，但我正在寻找一个正常的表单提交。

简单地说，我想要实现的是:当用户按下“提交”按钮时，我想禁用提交按钮。如果用户在加载时取消/停止提交，提交按钮仍将被禁用(如果提交被取消/停止，则应重新启用)。

编辑/改写 - 2013 年 12 月 16 日:

我的问题与此类似:Is there a jQuery event that I can monitor if form submission is cancelled?

例如，我有这个表格:

<form method="post" enctype="multipart/form-data">
    <input type="file" name="imginput" value=""/>
    <input type="text" name="textinput" value=""/>
    <input type="button" id="submitbtn" value="Submit"/>
</form>

这是问题场景:

新手用户填写表单，然后双击提交按钮。相同的表单值被插入服务器两次!

努力实现:

我想用 $('#submitbtn').bind('click', function() { $(this).attr('disabled','disabled'); $(this).prop('disabled', true); }); 禁用点击提交按钮，这解决了问题，但产生了另一个问题:如果用户在表单仍在提交时单击“esc”或停止浏览器，提交按钮仍将被禁用并且用户无法再重新提交表单，我想取消“提交过程”后立即重新启用提交按钮。有没有办法做到这一点？类似: $(window).onStop(function() { ... }); ?或表明提交过程已被中断(或仍在运行)的方式？

笔记:

寻找客户端(javascript 或 jquery)解决方案。我知道它可以通过服务器端检查相同的条目轻松解决，但我对服务器端解决方案不感兴趣。

问题可以通过 XHR(ajax/json)绑定(bind)(如 onSuccess、onFailure 等)解决。但在这种情况下，我使用的是普通帖子，而不是 XHR，所以请从你的答案中排除 XHR。

解决方案至少要解决 5 大浏览器(IE、FF、Chrome、Safari、Opera)的问题。

有人可能会建议我们为“esc”按钮绑定(bind)“keypress”，这样当用户按下“esc”时，我们重新启用提交按钮。这很好，但这是半解决方案。如果用户通过浏览器的停止按钮停止了“提交过程”，有没有办法表明这个停止按钮被点击了呢？

Answer 1

最后，这个问题实际上分解了复杂的问题，因此可以部分解决，因为它应该是。首先，让我们把大象带出房间:

没有跨浏览器解决方案可以检测用户何时点击停止/(引用)按钮

我实际上查了一段时间，找不到怎么做，但也许有人可以提供答案并启发我们俩。现在，让我们把第二只大象带出房间。

不允许 Ajax 请求(出于某种原因)。一旦用户点击了提交按钮并且实际的提交事件触发了，我们是 卡住

事实上，我们能够在处理某些请求的同时做一些事情，这就是所谓的异步(就像“Ajax”中的第一个“A”)。让我们看看第三只大象

我有愚蠢的/没有经验的/clickety-clackety/abusers 用户，他们可能会意外地在服务器上创建不一致(即:不需要的重复)。我们应该提供一种机制来阻止此类事件。

当然，禁用按钮是这种困境中最简单的解决方案。我们捕获提交，放入一行以禁用该表单的任何进一步提交事件。完毕。下一头大象会进来吗？

该过程已经开始，用户看到进度指示器在旋转并意识到他刚刚搞砸了。他想阻止它，见鬼!他需要阻止它。

问题 ，用户不知道(他肯定不需要知道)服务器是否已经拥有完整的 header 并正在处理请求。服务器 可以听听客户端是否中止但是...

用户按下停止按钮!服务器是否处理了请求？服务器转储了吗？我的数据进入数据库了吗？哦，现在我有一个无法使用的禁用表格，我不知道我的所作所为是否有后果。刷新一下怎么样？

现在你的问题有一堆大漏洞，因为你不希望你的请求是异步的，并且没有办法监听 browser.onStop可靠。

我的答案

以不同的方式思考问题。

你害怕不一致。解决方法:禁用第一个

之后的提交事件

您的用户很愚蠢/没有经验。解决方法:大红标Warning: do not press the stop button during the process, or navigate away from the page until the request has completed .

您的用户很担心。解决方案:添加警告You may edit your post/info in another page once the request has completed. (some instructions to find the edit page)

您的服务器(或慢速连接)需要很长时间才能完成，用户可能会不耐烦。解决方案:在触发提交之前设置一个超时事件，将... 可是等等! 请求是 同步 这意味着在完成之前不能做任何其他事情。 Dear User: this process may take a while. If after X mins you have not been redirected to this/page.html please... (do something/more instructions)

如果您想要更高级别的交互性，请接受所有这些建议并开始使用 Ajax，教育您的用户尝试中止请求的危险，并为他们提供事后编辑的选项。

遵循其他服务的示例。许多公司在付款过程中向 发出强烈警告。请耐心等待该过程完成并添加一些说明以防万一出现问题并且用户担心。

考虑对交互性添加限制，某些流程并不意味着是交互性的(付款、唯一条目...)

如果您担心用户会将自己困在禁用表单上，请向他添加一些信息。 If you tried to stop the procedure please follow this link to see if it was processed, if it wasn't you will be redirected to this form again (you may want to save the users form data so he doesn't have to start over)