更改window.location.href中止AJAX

Question

I have an HTML page with a button. 我有一个带有按钮的HTML页面。 When the user clicks on the button, window.location.href is updated to the URL of a text file. 当用户单击按钮时， window.location.href将更新为文本文件的URL。 The text file is served with Content-Disposition: attachment , so the file is downloaded & does not open in the browser. 该文本文件与Content-Disposition: attachment ，因此该文件已下载且无法在浏览器中打开。

The problem is that there are also AJAX requests occurring on this page. 问题是此页面上也发生了AJAX请求。 Whenever window.location.href is changed, all of the AJAX requests silently abort (or at the very least, the jQuery.ajax error event is not triggered). 每当window.location.href更改时，所有AJAX请求都将静默中止（或者至少不会触发jQuery.ajax error事件）。

So how can I download a file without reloading the page or aborting any AJAX? 那么，如何在不重新加载页面或中止任何AJAX的情况下下载文件？ I need to do this in IE7+ ( Update: Needs to work in IE7+ & modern browsers, including iOS & Android) . 我需要在IE7 +中执行此操作（ 更新： 需要在IE7 +和现代浏览器（包括iOS和Android）中工作） 。

Here is some sample code. 这是一些示例代码。 I created two endpoints in Express; 我在Express中创建了两个端点。 /ajax just responds a simple JSON; /ajax只是响应一个简单的JSON； /download responds with a text file after ten seconds. /download在十秒钟后回复一个文本文件。 If you click on "Start AJAX" to request /ajax followed by "Start Download" to request /download , the AJAX request is aborted. 如果单击“启动AJAX”以请求/ajax然后单击“开始下载”以请求/download ，则AJAX请求将中止。 The timer is just for ease-of-use. 计时器只是为了易于使用。

HTML HTML

<html>

<head>
<title>Firefox Download &amp; AJAX Test</title>

<script src="bower_components/jquery/dist/jquery.js"></script>

<body>
<form method="GET" action="">
<button id="btn-ajax" type="submit">Start AJAX</button>
<button id="btn-download" type="submit">Start Download</button>
</form>

<div id="dynamic-content"></div>

<script>
(function() {
    var $dynamicContent = $("#dynamic-content");

    $("form").submit(function(e) { e.preventDefault(); });

    $("#btn-ajax").click(function() {
        var $btn = $(this).prop("disabled", true),
                left = 10,
                countdown;

        function tick() {
            if ( left <= 0 ) {
                stop();
            }

            $dynamicContent.text(left--);
        }

        function stop() {
            $btn.prop("disabled", false);
            clearInterval(countdown);
        }

        countdown = setInterval(tick, 1000);
        tick();

        $.ajax({
            method: "GET",
            url: "/ajax",
            complete: stop,

            success: function(data) {
                $dynamicContent.text(data.value);
            },

            error: function() {
                $dynamicContent.text("Error!");
            }
        });
    });

    $("#btn-download").click(function() {
        window.location.href = "/download";
    });
})();
</script>

Express Router 快速路由器

// GET /download
exports.download = function(req, res) {
    res.set("Content-Type", "text/plain");
    res.set("Content-Disposition", "attachment; filename=download.txt");
    res.send("You have downloaded this text file");
};

// GET /ajax
exports.ajax = function(req, res) {
    setTimeout(function() { res.send({ value: "Success!" }); }, 10000);
};

Thank you for your time. 感谢您的时间。

Answer 1

As you've set up the response headers to tell the browser it's a download, rather than pointing the current page to the link why not open a new window (which immediately vanishes as the browser sees such headers) 当您设置了响应标头以告知浏览器是下载时，而不是将当前页面指向链接，为什么不打开新窗口（当浏览器看到此类标头时，该新窗口立即消失）

window.open('/download', '_blank');

A second way is to point to the location using an <iframe> that the user can't see 第二种方法是使用用户看不到的<iframe>指向该位置

<iframe id="downframe" src="about:blank" style="display:none;"></iframe>

document.getElementById('downframe').src = '/download';

更改window.location.href中止AJAX

问题描述

1 个解决方案

解决方案1
0 2014-04-01 17:46:49

更改window.location.href中止AJAX

问题描述

1 个解决方案

解决方案1 0 2014-04-01 17:46:49

解决方案1
0 2014-04-01 17:46:49