トップ  >  2013年  >  2013.10.15 [jQuery] $.ajax() 順番に処理をする
features [jQuery] $.ajax() 順番に処理をする
2013.10.15記
jQuery の $.ajax()でファイルを作成し、そのファイルをZipにしてダウンロードさせるというようなものを作りたいと思い(1)のようなコードを書いてみた。
ファイルができる前に、Zipを作成してしまい。うまくいきません

そこで、$.ajax()のオプションの「async: true」を「async: false」に、同期通信で行ってみるとうまくZipは作成されるのですが、進捗状況を画面表示してくれません。
http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/
同期通信は、「通信に応答があるまでブラウザはロックされ、操作を受け付けなくなる」となっています。

そこで、以下のサイトを参考に(1)の「var func =」の部分を書き換えて(2)にして、うまくいきました
http://www.koikikukan.com/archives/2012/10/11-000300.php

----
「<div id="exe">ファイル作成・ダウンロード</div>」の部分をクリックするとファイル作成を開始し、「<div id="progres"></div>」の部分に進捗が表示されます

(1)

HTML部分

<div id="exe">ファイル作成・ダウンロード</div>
<div id="progres"></div>
JavaScript部分

$('#exe').on('click', function() {
	$('#progres').text('ファイル作成中');

	var files = new Array('test1.xlsx', 'test2.xlsx', 'test3.xlsx')
	func.save(files);
}

var func = {
	save: function(files) {
		// ファイル作成
		for (var file_name in files) {
			$('#progres').text('ファイル作成中:' + file_name);
			$.ajax({
				type: 'POST',
				async: true,//非同期
				url: 'ファイルを作成する.php',
				data: {
					'filename' : file_name, 
				}
			});
		}

		// ZIP作成
		$('#progres').text('ZIP作成中');
		var zip_file_name = 'files.zip';
		$.ajax({
			type: 'POST',
			url: 'ファイルをZip化する.php',
			data: {
				'file_name': zip_file_name, 
			},
			success: function() {
				$('#progres').text('完了');
				var _url = 'index.php?file='+ zip_file_name;
				window.open(_url, '_blank');
			}
		});
	}
}

(2)

JavaScript部分

var func = {
	// ファイル作成
	save: function(files) {
		var file_name = files.shift();// 配列から1つづつ取り出す
		$('#progres').text('ファイル作成中:' + file_name);

		$.ajax({
			type: 'POST',
			url: 'ファイルを作成する.php',
			data: {
				'filename' : file_name, 
			}
		}).done(function() {// 処理完了後
			if (files.length) {
				func.save(files);// 再帰的に呼び出す
			} else {
				func.zip();// 配列の中身をすべて処理したら、Zip出力へ
			}
		});
	},

	// Zip作成
	zip: function() {
		var zip_file_name = 'files.zip';
		$('#progres').text('ZIP作成中');

		$.ajax({
			type: 'POST',
			url: 'ファイルをZip化する.php',
			data: {
				'file_name': zip_file_name, 
			}
		}).done(function() {
			$('#progres').text('完了');

			var _url = 'ダウンロード.php?file='+ zip_file_name;
			window.open(_url, '_blank');
		});
	}
}
同期通信でブラウザはロックされるとありますが、FireFoxでロックが完全ではなく、画面に進捗状況が表示されます。IE10, Chromeはロックされました。
前
2013.11.15 Google Fonts
カテゴリートップ
2013年
次
2013.09.15 DTCP-IP/DLNA

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999-2018 keibunsya all right reserved.