处理表单后的 Javascript 事件答案

【问题标题】：Javascript event after a form has been processed处理表单后的 Javascript 事件
【发布时间】：2011-06-29 11:30:44
【问题描述】：

当服务器完成处理表单时，javascript 如何注册回调以运行？这是我的特殊设置：

<form 
    id="savePlaylistForm" 
    name="savePlaylistForm" 
    target="savePlaylistIFrame"
    method="post"
    action="<?=base_url()?>index.php/savePlaylist">
    <input 
        type="hidden" 
        id="savePlaylistEntire"
        name="savePlaylistEntire" />
</form>
<iframe
    id="savePlaylistIFrame"
    name="savePlaylistIFrame"
    style="display: none">
</iframe>

我尝试了以下方法无济于事：

onSubmit

将 onSubmit 附加到表单不是正确的事件，因为 onSubmit 在客户端尝试提交时发生。甚至还没有联系到服务器。

加载

我将 onLoad 附加到目标 iFrame。在我的情况下它不会被解雇。我的服务器脚本设置标题以模拟 m3u 播放列表文件。 IFrame 仅在加载普通 HTML 页面时触发 onLoad，而不是在弹出文件保存对话框时触发。即使我要在 iFrame 中加载纯 HTML 页面，onLoad 也只会在用户第一次提交表单时触发。后续提交不会触发 onLoad。

【问题讨论】：

我不知道代码会如何查找，但如果您使用 XMLHttpRequest 对象 (xhr) 提交数据，您应该能够将事件绑定到onreadystatechange 事件。在那里，您应该能够使用xhr.getResponseHeader('Content-Type') 或其他方式询问返回的标头。如果onreadystatechange 事件触发并且readyState == 4 触发，甚至可能不需要询问。

标签： javascript html forms iframe

【解决方案1】：

不过，这没有任何意义，提交表单会重新加载带有新响应的页面。所以你的原始文档甚至都不存在了，它怎么会运行回调呢？

您可以只附加一个 onSubmit 处理程序来取消默认提交操作（通过返回 false）并通过进行 Ajax 调用来复制默认浏览器提交。然后你就有了一个附加响应回调的地方（通过监听 onReadyStateChange，或者通过使用更高级别的东西，比如 jQuery）。

【讨论】：

提交表单不会刷新整个页面。这是就地表单提交。我打电话给$('savePlaylistForm').submit()，服务器响应针对iFrame。这不能用 Ajax 复制。 Ajax 无法为模拟文件的 PHP 输出弹出文件保存对话框。