How to handle the failure of Jquery Ajax request file download operation

This time I bring you Jquery Ajax requestFile downloadHow to deal with failed operation, what are the things to note when dealing with Jquery Ajax request file download operation failure?The following is a practical case, Let’s take a look.

jQuery is indeed a very good lightweight JS framework that can help us quickly develop JS applications and, to a certain extent, change our habit of writing

JavaScript code. This article I will focus on introducing the analysis and solutions to the reasons for the failure of Jquery Ajax request file download operation. Friends who are interested in the analysis of the reasons for the failure of ajax request will learn together

jQuery is indeed a very good lightweight JS Frameworks can help us quickly develop JS applications and, to a certain extent, change our habit of writing JavaScript code.

Stop talking nonsense and get straight to the point. Let’s analyze the reasons for the failure first

1. Reasons for the failure

That’s because of the response Generally, the requesting browser will process the response output by the server, such as generating png, file download, etc. However, the ajax request is only a "character type" request, that is, the requested content is stored in text type. The download of the file is in binary form. Although the returned response can be read, it is only read and cannot be executed. To put it bluntly, js cannot call the download processing mechanism and program of the browser.

2. Solution

1) You can use jquery to create a form and submit it to implement file download;

var form = $("<form>");
form.attr("style","display:none");
form.attr("target","");
form.attr("method","post");
form.attr("action",rootPath + "T_academic_essay/DownloadZipFile.do");
var input1 = $("<input>");
input1.attr("type","hidden");
input1.attr("name","strZipPath");
input1.attr("value",strZipPath);
$("body").append(form);
form.append(input1);
form.submit();
form.remove();

2) You can directly use the a tag to achieve it File download;

Click to download

3) Use hidden iframe or new form to solve the problem.

PS: Use of AJAX request $.ajax method

Use jQuery's $.ajax method to control AJAX requests in more detail. It exerts a fine-grained level of control over AJAX requests.

$.ajax method syntax

$.ajax(options)
Parameters
options	(Object) An instance of an object whose Properties define the parameters of this operation. See table below for details.
return value	XHR Example

optionsDetailed range value

Name	Type	Description
url	String	Requested url Address
type	String	The HTTP to be used method. Usually POST or GET. If omitted, defaults to GET
data	object	An object whose properties are passed as query parameters to requests. If it is a GET request, the data is passed as the query string; if it is a POST request, the data is passed as the request body. In both cases, it is the $.ajax() utility function that handles the encoding of the value
dataType	String	A keyword that identifies the type of data expected to be returned in the response. This value determines what subsequent processing (if any) is performed before passing the data to the callback function. Valid values ​​are: xml - the response text is parsed into an XML document, and the resulting XML DOM is passed to the callback function html - the response text is passed to the callback function unprocessed . Any An in-depth analysis of the Bootstrap list group component Detailed explanation of JavaScript function currying Complete example of JS password generation and strength detection (with demo source code download) Angularjs integrates WeChat UI (weui) How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills