How to use jQuery to request and download files

In the development of websites or applications, sometimes it is necessary to implement the file download function. File downloading can usually be done by setting relevant response headers on the server side, but jQuery can achieve a more convenient operation. This article will introduce how to use jQuery to request and download files.

1. Using jQuery.get()

The jQuery.get() method is a simple GET request method through which you can request data from the server. When requesting a file download, you can use this method to send a download link to the server. After the server sets the response header, the file can be downloaded.

Sample code:

$("#downloadBtn").click(function () {
    var url = "download_file.xlsx";
    $.get(url, function(data) {
        window.location.href = url;
    });
});

In this sample code, when the download button is clicked, the file is first requested from the server through the $.get method. After successfully obtaining the file, set the browser download link through window.location.href.

2. Use jQuery.ajax()

jQuery.ajax() method can handle more complex request scenarios and achieve more detailed control. Usually when downloading, using the $.get method can meet the needs. However, sometimes it is necessary to perform some special processing during the download process, such as displaying download progress, customizing request headers, etc. This can be achieved using jQuery.ajax().

Sample code:

$("#downloadBtn").click(function () {
    var url = "download_file.xlsx";
    $.ajax({
        url: url,
        type: 'GET',
        xhrFields: {
            responseType: 'blob'
        },
        success: function (data) {
            var a = document.createElement('a');
            var url = window.URL.createObjectURL(data);
            a.href = url;
            a.download = "download_file.xlsx";
            a.click();
            window.URL.revokeObjectURL(url);
        }
    });
});

In this sample code, a GET request is sent through the jQuery.ajax() method, and the response type is set to blob, indicating that the response data is A binary stream. After the request is successful, create a <a> tag and use the window.URL.createObjectURL(data) method to convert the response data into a URL address. Set the href attribute of the <a> tag to the URL address, set the download attribute to the file name, and call a.click()Method to trigger file download. Finally, use the window.URL.revokeObjectURL(url) method to release the URL object to prevent memory leaks.

It should be noted that different browsers may have different implementations when processing file downloads, and appropriate adjustments may need to be made based on specific scenarios.

Summary

This article introduces two methods of using jQuery to download files, namely $.get() and jQuery.ajax(). In practical applications, you can choose according to specific scenarios to meet different needs. It is worth noting that when dealing with file downloads, you need to pay attention to cross-browser compatibility issues.

The above is the detailed content of How to use jQuery to request and download files. For more information, please follow other related articles on the PHP Chinese website!