Home > Web Front-end > JS Tutorial > Analysis and solutions to the causes of failure of Jquery Ajax request file download operation

Analysis and solutions to the causes of failure of Jquery Ajax request file download operation

亚连
Release: 2018-05-24 14:55:29
Original
2306 people have browsed it

jQuery is indeed a very good lightweight JS framework, which can help us quickly develop JS applications, and to a certain extent, it has changed our habit of writing JavaScript code. This article focuses on introducing Jquery Ajax request file download. Analysis and solutions to the reasons for operation failure. Friends who are interested in the analysis of the reasons for ajax request failure will learn together.

jQuery is indeed a very good lightweight JS framework that can help us quickly develop JS Application, and to a certain extent, it has changed 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();
Copy after login

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 instance

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 used to identify the expected The type of data that will be returned in the response. This value determines what subsequent processing (if any) is performed before the data is passed 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

Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template