ホームページ >ウェブフロントエンド >jsチュートリアル >Jquery Ajaxリクエストファイルのダウンロード操作が失敗する原因の分析と解決策
Jquery Ajaxリクエストファイルのダウンロード操作が失敗する原因の分析と解決策
- 亚连オリジナル
- 2018-05-24 14:55:292327ブラウズ
jQuery は確かに非常に優れた軽量 JS フレームワークであり、JS アプリケーションを迅速に開発するのに役立ち、JavaScript コードを記述する習慣をある程度変えました。この記事では、Jquery Ajax リクエスト ファイルのダウンロード操作の失敗について説明します。原因分析と解決策、Ajax リクエストが失敗する理由の分析に興味のある友人は、一緒に学びましょう
jQuery は確かに非常に優れた軽量 JS フレームワークであり、JS アプリケーションを迅速に開発するのに役立ちます。 JavaScript コードを書く習慣が変わりました。
これ以上はナンセンスです。まず、失敗の理由を分析しましょう
1. 失敗の理由
通常、要求元のブラウザは応答出力を処理します。ただし、ajax リクエストは「文字タイプ」リクエストのみです。つまり、リクエストされたコンテンツはテキストタイプで保存されます。ファイルはバイナリ形式でダウンロードされますが、返された応答は読み取ることができますが、単純に言うと、js はブラウザのダウンロード処理機構やプログラムを呼び出すことができません。
2. 解決策
1) jquery を使用してフォームを作成し、それを送信してファイルのダウンロードを実装できます。
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) ファイルのダウンロードを実装するには、a タグを直接使用できます。 =”ダウンロード アドレス”> クリックしてダウンロード5db79b134e9f6b82c0b36e0489ee08ed
3) 非表示の iframe または新しいフォームを使用して解決します。
追記: AJAX リクエスト $.ajax メソッドの使用AJAX リクエストをより詳細に制御するには、jQuery の $.ajax メソッドを使用します。 AJAX リクエストに対してきめ細かいレベルの制御を実行します。
$.ajax 構文
|
| (オブジェクト) オブジェクトのインスタンス、そのプロパティこの操作のパラメータが定義されています。詳細については、以下の表を参照してください。 |||
| XHRインスタンス | |||
name |
type |
description |
|
url |
string | リクエストされた URL アドレス |
|
タイプ | String |
使用される HTTP メソッド。通常は POST または GET です。省略した場合、デフォルトは GET |
|
data |
Object |
プロパティがリクエストにクエリパラメータとして渡されるオブジェクト。 GET リクエストの場合、データはクエリ文字列として渡され、POST リクエストの場合、データはリクエスト本文として渡されます。どちらの場合も、値のエンコードを処理するのは $.ajax() ユーティリティ関数です |
|
dataType |
String |
応答で返されることが予想されるデータのタイプを識別するために使用されるキーワード。この値は、データがコールバック関数に渡される前に実行される後続の処理 (存在する場合) を決定します。有効な値は次のとおりです: xml - 応答テキストは XML ドキュメントに解析され、結果の XML DOM がコールバック関数に渡されます。 html - 応答テキストは未処理でコールバック関数に渡されます。返された HTML フラグメント内の 3f1c4e4b6b16bbbd69b2ee476dc4f83a ブロックはすべて評価されます json - 応答テキストは JSON 文字列として評価され、結果のオブジェクトはコールバック関数に渡されます jsonp - json と似ていますが、次のような利点があります。リモート スクリプトのサポートが提供されていること (リモート サーバーがサポートしていると仮定) スクリプト応答テキストがコールバック関数に渡されます。コールバック関数が呼び出される前に、応答は 1 つ以上の JavaScript ステートメントとして処理されます。 text - 応答テキストは通常のテキストであると想定されます。サーバー リソースは、適切なコンテンツ タイプの応答ヘッダーを設定する責任があります。この属性を省略した場合、応答テキストは処理や評価を行わずにコールバック関数に渡されます |
|
timeout |
Value |
Ajaxリクエストのタイムアウト値（ミリ秒）を設定します。タイムアウト値が期限切れになる前にリクエストが完了しない場合、リクエストは中止され、エラー コールバック関数 (定義されている場合) が呼び出されます。機能。これらの関数は要素にアタッチして、Ajax 呼び出し中のさまざまな時間または状態でトリガーできます。グローバル関数のトリガーはデフォルトで有効になっています |
|
contentType |
String |
リクエストで指定されるコンテンツタイプ。デフォルトは application/x-www-form-urlencoded (フォーム送信に使用されるのと同じデフォルトのタイプ) |
|
success |
関数 |
この関数は、リクエストに対する応答が成功を示した場合に使用されます。ステータスコードが呼び出されます。応答本文は最初のパラメーターとしてこの関数に返され、指定された dataType 属性に基づいています。 2 番目のパラメーターは、ステータス コードを含む文字列です。この場合、常に成功ステータス コードになります。 |
|
error |
Function |
リクエストへの応答がエラー ステータス コードを返した場合、これは機能を転送といいます。この関数には、XHR インスタンス、ステータス メッセージ文字列 (この場合は常にエラー ステータス コード)、および XHR インスタンスによって返される例外オブジェクト (オプション) の 3 つの引数が渡されます。リクエストが完了すると Function |
|
beforeSend |
関数 |
は、リクエストを行う前に呼び出されます。この関数には同期リクエストが渡されます。デフォルトでは、リクエストは非同期です。 |
|
processData |
Boolean |
false に設定すると、渡されたデータが URL エンコード形式に処理されなくなります。デフォルトでは、データは URL エンコード形式に処理されます (application/x-www-form-urlencoded タイプのリクエストに適用されます) |
|
ifModified |
Boolean |
true に設定すると、リクエストは、(Last-Modified ヘッダーに従って) 最後のリクエスト以降に応答コンテンツが変更されていない場合にのみ成功を許可されます。省略した場合、ヘッダーチェックは実行されません |
|
|
下面看个例子，尽可能多的用到options中的选项 客户端代码： <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function () {
$('#selectNum').change(function () {
var idValue = $(this).val();
var show = $('#show');
$.ajax({
url: 'Server.aspx',
type: 'POST',
data: { id: idValue },
//调小超时时间会引起异常
timeout: 3000,
//请求成功后触发
success: function (data) { show.append('success invoke!' + data+'<br/>'); },
//请求失败遇到异常触发
error: function (xhr, errorInfo, ex) { show.append('error invoke!errorInfo:' + errorInfo+'<br/>'); },
//完成请求后触发。即在success或error触发后触发
complete: function (xhr, status) { show.append('complete invoke! status:' + status+'<br/>'); },
//发送请求前触发
beforeSend: function (xhr) {
//可以设置自定义标头
xhr.setRequestHeader('Content-Type', 'application/xml;charset=utf-8');
show.append('beforeSend invoke!' +'<br/>');
},
//是否使用异步发送
async: true
})
});
})
</script>
</head>
<body>
<select id="selectNum">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p id="show"></p>
</body>
</html>服务端主要代码： protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
if (Request["id"] != null && !string.IsNullOrEmpty(Request["id"].ToString()))
{
//启用该句会引发ajax超时异常
// System.Threading.Thread.Sleep(3000);
Response.Write(GetData(Request["id"].ToString()));
}
}
}
protected string GetData(string id)
{
string str = string.Empty;
switch (id)
{
case "1":
str += "This is Number 1";
break;
case "2":
str += "This is Number 2";
break;
case "3":
str += "This is Number 3";
break;
default:
str += "Warning Other Number!";
break;
}
return str;
}运行程序，结果如图：
上面是我整理给大家的，希望今后会对大家有帮助。 相关文章： |
以上がJquery Ajaxリクエストファイルのダウンロード操作が失敗する原因の分析と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。