当我使用Chrome Network检查器检查时，从两个ajax函数返回的json似乎已下载完成。但是，jQuery并没有遍历两个json文件的所有项目。它仅遍历json文件的前三项。因此，每个jQuery只构建前三部电影的电影标题。
如果我仅使用$ .when和一个函数，它将工作并返回所有项目。我注释了可以作为一个单一功能使用的两个领域。
jQuery 1.11.0
这是JavaScript：
$(document).ready(function()
{
var movieCollectionUrl = 'json/movie_collection.json';
var movieFavoritesUrl = 'json/movie_favorites.json';
var movieCollectionElement = $('#collection ul');
var movieFavoritesElement = $('#favorites ul');
function getList(url)
{
return $.ajax(
{
dataType: "json",
type: "get",
url: url
});
}
function buildList(data, element)
{
$.each(data, function(i)
{
var title = data[0][i].title;
//var title = data[i].title; //this returns all items but only with a single function with $.when
var html = '<li>' + title + '</li>';
element.append(html);
});
}
function myExecute(movieCollectionData, movieFavoritesData)
{
buildList(movieCollectionData, movieCollectionElement);
buildList(movieFavoritesData, movieFavoritesElement);
}
/*
function executeSingle(movieFavoritesData)
{
buildList(movieFavoritesData, movieFavoritesElement);
}
*/
function myFail()
{
alert("FAILED TO LOAD");
}
$.when(getList(movieCollectionUrl), getList(movieFavoritesUrl)).then(myExecute, myFail);
//$.when(getList(movieFavoritesUrl)).then(executeSingle, myFail); //This one works. Using only one function here
}); //document ready
index.html
<!DOCTYPE HTML>
<head>
<title>Movies</title>
</head>
<body>
<div id="favorites">
<h2>Favorite Movies</h2>
<ul></ul>
</div>
<div id="collection">
<h2>Movie Collection</h2>
<ul></ul>
</div>
</body>
</html>
movie_collection.json
[
{
"title": "127 Hours",
"poster": "http://slurm.trakt.us/images/posters_movies/6646.1.jpg"
},
{
"title": "2012",
"poster": "http://slurm.trakt.us/images/posters_movies/463.jpg"
},
{
"title": "The 40 Year Old Virgin",
"poster": "http://slurm.trakt.us/images/posters_movies/658.1.jpg"
},
{
"title": "A Better Life",
"poster": "http://slurm.trakt.us/images/posters_movies/182444.1.jpg"
},
{
"title": "A Moment To Remember",
"poster": "http://slurm.trakt.us/images/posters_movies/162086.jpg"
}]
movie_favorites.json
[
{
"title": "A Seperation",
"poster": "http://slurm.trakt.us/images/posters_movies/176861.2.jpg"
},
{
"title": "Abraham Lincoln Vampire Hunter",
"poster": "http://slurm.trakt.us/images/posters_movies/184657.2.jpg"
},
{
"title": "The Adventures of Tin Tin",
"poster": "http://slurm.trakt.us/images/posters_movies/13066.2.jpg"
},
{
"title": "Agore",
"poster": "http://slurm.trakt.us/images/posters_movies/223.jpg"
}]
看一看的例子$.when中的文件：
$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) ).done(function( a1, a2 ) {
// a1 and a2 are arguments resolved for the page1 and page2 ajax requests, respectively.
// Each argument is an array with the following structure: [ data, statusText, jqXHR ]
var data = a1[ 0 ] + a2[ 0 ]; // a1[ 0 ] = "Whip", a2[ 0 ] = " It"
if ( /Whip It/.test( data ) ) {
alert( "We got what we came for!" );
}
});
如前所述，传递给回调函数的参数是form的数组[ data, statusText, jqXHR ]。数组的第一个元素包含实际响应。因此，您必须将功能更改为
function myExecute(movieCollectionData, movieFavoritesData)
{
buildList(movieCollectionData[0], movieCollectionElement);
buildList(movieFavoritesData[0], movieFavoritesElement);
}
单个案例之所以有效，是因为$.when它不会创建新的承诺，它只会返回要返回的承诺$.ajax，因此不会汇总多个承诺的结果。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句