Javascript jQuery如何在表单post返回后触发事件？

我有一个昂贵的表单操作，它在服务器上构建一个zip文件并将其返回到浏览器

<form action='/download' method='post'>

<input type='submit' value='download'/>

</form>

我想在点击按钮时阻止页面，这样用户就不会重复点击按钮

但是，我希望在表单返回后取消阻止页面

如何在成功完成表单时触发事件

（我知道我可以通过将表单更改为ajax提交来触发此操作，但随后不会出现“保存文件”对话框…）

有什么建议吗

---

谢谢

不使用AJAX的一种处理方法是将表单内容提交到

iframe

元素。如果将onsubmit函数附加到表单以禁用进一步提交，并将onload函数附加到iframe，则应该能够禁用用户多次提交表单

HTML示例：

<form action="/download" method="post" target="downloadFrame" onsubmit="return downloadFile();">
  <input type="submit" value="download" />
</form>
<iframe style="width: 0px; height: 0px;" scrolling="no" frameborder="0" border="0" name="downloadFrame" onload="downloadComplete();"></iframe>

---

似乎还没有人找到在浏览器本身中检测post返回的方法，但是使用AJAX还有另一种可能性。不过，这有点复杂：

<script type="text/javascript">
    $(function () {
        $('#submitbtn').click (function () {
            window.setTimeout (dldone, 100);
            return true;
        });

        function dldone () {
            $.get ("/downloadstatus?rand="+$('#rand').val (), function (data) {
                if (data == 'done') {
                    // data generation finished, do something
                } else {
                   window.setTimeout (dldone, 100);
                }
            });
        }
    });
</script>
<form action="/generatedata" method="post">
    <input type="hidden" id="rand" value="[RANDOMVALUE]">
    <input type="submit" id="submitbtn" value="Download Data">
</form>

我相信有更优雅的方法可以做到这一点，但你明白了。这在我测试过的所有浏览器中都可以正常工作。

我使用了以下方法：

function generatePdfZipViaWS_ajax(theUrl) {

    //=========================
    // testé avec Chrome 37.0.2062.124 m, Firefox  32.0.3
    // ça block avec IE9 à cause du xmlHttp.overrideMimeType
    //=========================
    var xmlHttp = new XMLHttpRequest();

    var alert = document.getElementById("alertError");
    block_UI();

    var url = "undefined";

    xmlHttp.open("GET", theUrl, true);
    xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xmlHttp.overrideMimeType("application/octet-stream");
    xmlHttp.responseType = "blob";

    xmlHttp.onload = function(oEvent) {
        if (xmlHttp.status == 200) {

            deblock_UI();
            // a mettre apres un certain temps:  window.URL.revokeObjectURL(url);

        } else {
            alert.style.display = "block";
            deblock_UI();

            //  console.log("Error " + xmlHttp.status + " occurred downloading your file.<br \/>");
        }
    };

    xmlHttp.onreadystatechange = function() {

        if (xmlHttp.readyState == xmlHttp.DONE) {

            if (xmlHttp.status == 200) {

                var contentDisposition = xmlHttp.getResponseHeader("Content-Disposition");
                var type = xmlHttp.getResponseHeader("Content-Type");

                var reponseType = xmlHttp.responseType;

                var pos1 = contentDisposition.indexOf("archive");
                var pos2 = contentDisposition.lastIndexOf(".zip") + 4;
                var fileName = contentDisposition.substring(pos1, pos2);

                if (fileName === null) {
                    fileName = "archivexxxxxxxxxxxxxx.zip";
                }

                console.log("fileName:" + fileName);

                var blob = xmlHttp.response;
                url = URL.createObjectURL(blob);

                var a = document.createElement('a');
                a.style = "display: none";
                a.href = url;
                a.download = fileName;
                a.type = type;
                document.body.appendChild(a);
                a.click();
                //a.delete();

                deblock_UI();

            } else {

                var msg =" Une erreur "  + xmlHttp.status +" est apparue pendant que votre demande était traitée.\n"

                msg = msg + "Merci de réessayer plus tard!";

                alert.innerHTML = msg;
                alert.style.display = "block";

                deblock_UI();
                console.log(msg);
            }
        }
    };
    xmlHttp.send();
}

函数generatePdfZipViaWS\u ajax（URL）{
//=========================
//testéavec Chrome 37.0.2062.124 m，Firefox 32.0.3
//ça block avec IE9ácause du xmlHttp.overrideMimeType
//=========================
var xmlHttp=new XMLHttpRequest（）；
var alert=document.getElementById（“alertError”）；
block_UI（）；
var url=“未定义”；
open（“GET”，theUrl，true）；
setRequestHeader（'X-request-With'，'XMLHttpRequest'）；
overrideMimeType（“应用程序/八位字节流”）；
xmlHttp.responseType=“blob”；
xmlHttp.onload=函数（oEvent）{
if（xmlHttp.status==200）{
deblock_UI（）；
//一个mettre包含特定的时间：window.URL.revokeObjectURL（URL）；
}否则{
alert.style.display=“block”；
deblock_UI（）；
//console.log（“下载文件时出错”+xmlHttp.status+。）；
}
};
xmlHttp.onreadystatechange=函数（）{
if（xmlHttp.readyState==xmlHttp.DONE）{
if（xmlHttp.status==200）{
var contentDisposition=xmlHttp.getResponseHeader（“内容处置”）；
var type=xmlHttp.getResponseHeader（“内容类型”）；
var reponseType=xmlHttp.responseType；
var pos1=contentDisposition.indexOf（“归档”）；
var pos2=contentDisposition.lastIndexOf（“.zip”）+4；
var fileName=contentDisposition.substring（pos1，pos2）；
如果（文件名===null）{
fileName=“archivexxxxxxxxxxxxx.zip”；
}
log（“文件名：”+fileName）；
var blob=xmlHttp.response；
url=url.createObjectURL（blob）；
var a=document.createElement（'a'）；
a、 style=“显示：无”；
a、 href=url；
a、 下载=文件名；
a、 类型=类型；
文件.正文.附件（a）；
a、 单击（）；
//a、 删除（）；
deblock_UI（）；
}否则{
var msg=“Une erreur”+xmlHttp.status+“这是一个有着独特个性的服饰。\n”
msg=msg+“谢谢你再加上焦油！”；
alert.innerHTML=msg；
alert.style.display=“block”；
deblock_UI（）；
控制台日志（msg）；
}
}
};
xmlHttp.send（）；
}

我现在没有时间写一个正确的答案，但是因为没有其他人有一个好的答案，我认为“突变观察者”会起作用

您可以使用此插件并在“成功”事件中执行任何您需要的操作您可以触发jQuery Ajax函数回调中的任何函数集。Try:-真的，您需要做的就是在单击submit按钮后禁用它，以防止再次单击它。重新加载页面时，javascript将被撤消，您可以再次单击。@Gavin，问题是页面没有重新加载，表单操作直接返回zip文件。@JayBlanchard Chris正在使用表单启动文件下载。使用Ajax将只创建zip文件，而不是下载文件。唯一的其他解决方案是使用Ajax创建zip，然后返回该zip文件的路径作为响应，然后使用Javascript重定向？我相信onsubmit是在提交时触发的，而不是在完成提交操作时触发的。@Chris您是对的。这将防止进一步提交。我忘记了当文件下载发生时，页面将不会重新加载。我将很快更新我的答案。这确实有效，但还远远不够理想，在某些错误情况下，我的操作将使用隐藏的iframe以消息进行301重定向。这将完全丢失，并且对用户来说似乎什么都没有发生。另外，我看不到将函数绑定到iframe的load事件的好方法，正如您所做的那样，我需要iframe来调用包含文档中的函数，这意味着会污染全局名称空间。所以我想我会放弃这种方法，把下载过程分为两步。感谢hack-tho，希望有人会发现它很有用@Chris：是的，由于许多原因，这远远不够理想，但这是作为一个完整的一步流程来完成的唯一方法之一。如果您不想使用内联函数，可以始终使用jQuery将加载函数绑定到iframe。另一种方法可能是使用表单上的

target=“\u blank”

将提交打开到新窗口。IE et Safari var a=document.createElement（'a'）；var-wasPageHide=0；a.cssText=“di

public function downloadstatusAction () {
    if ($this->db->fetchOne ("SELECT rand FROM dlstatus WHERE rand = ?", (int) $_GET["rand"])) {
        $db->delete ("dlstatus", array ("rand = ?" => (int) $_GET["rand"]));
        print "done";
    } else {
        print "loading";
    }
}

public function generatedataAction () {
    // generate data
    $this->db->insert ("dlstatus", array ("rand" => (int) $_POST["rand"]));
    // output data
}

function generatePdfZipViaWS_ajax(theUrl) {

    //=========================
    // testé avec Chrome 37.0.2062.124 m, Firefox  32.0.3
    // ça block avec IE9 à cause du xmlHttp.overrideMimeType
    //=========================
    var xmlHttp = new XMLHttpRequest();

    var alert = document.getElementById("alertError");
    block_UI();

    var url = "undefined";

    xmlHttp.open("GET", theUrl, true);
    xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xmlHttp.overrideMimeType("application/octet-stream");
    xmlHttp.responseType = "blob";

    xmlHttp.onload = function(oEvent) {
        if (xmlHttp.status == 200) {

            deblock_UI();
            // a mettre apres un certain temps:  window.URL.revokeObjectURL(url);

        } else {
            alert.style.display = "block";
            deblock_UI();

            //  console.log("Error " + xmlHttp.status + " occurred downloading your file.<br \/>");
        }
    };

    xmlHttp.onreadystatechange = function() {

        if (xmlHttp.readyState == xmlHttp.DONE) {

            if (xmlHttp.status == 200) {

                var contentDisposition = xmlHttp.getResponseHeader("Content-Disposition");
                var type = xmlHttp.getResponseHeader("Content-Type");

                var reponseType = xmlHttp.responseType;

                var pos1 = contentDisposition.indexOf("archive");
                var pos2 = contentDisposition.lastIndexOf(".zip") + 4;
                var fileName = contentDisposition.substring(pos1, pos2);

                if (fileName === null) {
                    fileName = "archivexxxxxxxxxxxxxx.zip";
                }

                console.log("fileName:" + fileName);

                var blob = xmlHttp.response;
                url = URL.createObjectURL(blob);

                var a = document.createElement('a');
                a.style = "display: none";
                a.href = url;
                a.download = fileName;
                a.type = type;
                document.body.appendChild(a);
                a.click();
                //a.delete();

                deblock_UI();

            } else {

                var msg =" Une erreur "  + xmlHttp.status +" est apparue pendant que votre demande était traitée.\n"

                msg = msg + "Merci de réessayer plus tard!";

                alert.innerHTML = msg;
                alert.style.display = "block";

                deblock_UI();
                console.log(msg);
            }
        }
    };
    xmlHttp.send();
}