Ajaxで複数ファイルやページから取得した値を処理する方法
順序が保証されないパターン(iが常に最大値かつ順序不定)
<div class="hoge">
<ul class="list-bullet-01">
</ul>
</div>
$(function(){
var $ajaxURLArr = [
'/about/',
'/contact/',
'/sitemap/'
];
for(var i = 0; i < $ajaxURLArr.length; i++){
$.ajax({
type:'GET',
url:$ajaxURLArr[i],
dataType:'html'
})
.then(
/*読み込み成功時*/
function(data){
var $heading = $(data).find('h1.hdg-l1-01').find('span').text();
var $headingDOM = '<li>(' + i + ')' + $heading +'</li>';
$('.hoge ul.list-bullet-01').append($headingDOM);
},
/*読み込み失敗時*/
function(){
alert("読み込み失敗");
});
}
});
順序が保証されないパターン(iは正しく処理されるも順序不定)
<div class="moge">
<ul class="list-bullet-01">
</ul>
</div>
$(function(){
var $ajaxURLArr = [
'/about/',
'/contact/',
'/sitemap/'
];
for(var i = 0; i < $ajaxURLArr.length; i++){
var $num = i;
(function(i){
$.ajax({
type:'GET',
url:$ajaxURLArr[i],
dataType:'html'
}).then(
/*読み込み成功時*/
function(data){
var $heading = $(data).find('h1.hdg-l1-01').find('span').text();
var $headingDOM = '<li>(' + i + ')' + $heading +'</li>';
$('.moge ul.list-bullet-01').append($headingDOM);
},
/*読み込み失敗時*/
function(){
alert("読み込み失敗");
});
})($num);
}
});
- ※$.ajax()をforで回すには$.ajax()を無名関数で囲いかつ無名関数に変数iを渡す必要がある
- ※ただこの処理ををしても、結局実行順序は不定となる
順序が保証されるパターン
<div class="fuga">
<ul class="list-bullet-01">
</ul>
</div>
$(function(){
var $ajaxURLArr = [
'/about/',
'/contact/',
'/sitemap/'
];
for(var i = 0; i < $ajaxURLArr.length; i++){
$.ajax({
type:'GET',
url:$ajaxURLArr[i],
dataType:'html',
async:false
})
.then(
/*読み込み成功時*/
function(data){
var $heading = $(data).find('h1.hdg-l1-01').find('span').text();
var $headingDOM = '<li>(' + i + ')' + $heading +'</li>';
$('.fuga ul.list-bullet-01').append($headingDOM);
},
/*読み込み失敗時*/
function(){
alert("読み込み失敗");
});
}
});
- ※「async:false」を指定することで同期通信となり順番が保証される
- ※無名関数でiを渡す処理も必要ナシ
デモの解説記事に戻る