[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 |