Jquery 在$.getJSON中使用$.each（）

这适用于使用1.0.1版的jQuery移动应用程序

我试图从我的

getmovies.php

文件中获取数据，该文件输出JSON，用于jQuery函数，该函数将数据附加到HTML页面上的无序列表中

我的HTML页面显示正确，但getMoviesList（）函数不附加任何列表项，因此内容区域留空

我猜我的$.each（）函数有问题。我对PHP比较熟悉，但尝试更熟悉jQuery和JSON，以便在jQuery移动应用程序中移动数据

getmovies.php

输出JSON如下：

{"items":[
{"movieID":"65086","title":"The Woman in Black","poster":"\/kArMj2qsOnpxBCpSa3RQ0XemUiX.jpg"},
{"movieID":"76726","title":"Chronicle","poster":"\/853mMoSc5d6CH8uAV9Yq0iHfjor.jpg"}
]}

我的Javascript如下所示：

var serviceURL = "http://mydomain.com/app3/services/";

var movies;

$('#moviesPage').bind('pageinit', function(event) {
  getMoviesList();
});

function getMoviesList() {
  $.getJSON(serviceURL + 'getmovies.php', function(data) {
    $('#moviesList li').remove();
    movies = data.items;
    $.each(movies, function(index, movie) {
      $('#moviesList').append('<li><a href="movie-details.html?movieID=' + movie.movieID + '">' +
      '<img src="posters/' + movie.poster + '"/>' +
      '<h4>' + movie.title + '</h4>' +
      '<p>Other details...</p>' +
      '</a></li>');
    });
    $('#movieList').listview('refresh');
  });
}

var serviceURL=”http://mydomain.com/app3/services/";
电影；
$（'#moviesPage'）.bind（'pageinit'，函数（事件）{
getMoviesList（）；
});
函数getMoviesList（）{
$.getJSON（serviceURL+'getmovies.php'，函数（数据）{
$（“#moviesList li”）.remove（）；
电影=数据项；
$.each（电影，功能（索引，电影）{
$（'moviesList'）。追加（'li>'）；
});
$（'#movieList'）。列表视图（'refresh'）；
});
}

我的HTML如下所示：

<div id="moviesPage" data-role="page">

  <div data-role="content">

    <ul id="moviesList" data-role="listview" data-filter="true"></ul>

  </div><!-- /content -->

</div><!-- /page -->

我正在尝试修改以下示例应用程序以满足我的需要：

---

谢谢你的帮助。

在亚当的帮助下，我缩小了问题的范围

如果您使用的是Christophe Coenraets的“使用jQuery Mobile和PhoneGap的示例应用程序”(http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/)如果您使用的jQuery Mobile高于1.0rc1，则可能需要从以下位置替换javascript中的以下代码：

$('#employeeListPage').bind('pageinit', function(event) { getEmployeeList(); });

致：

原因在jQuery移动文档中的以下链接中解释，该链接位于pageCreate=DOM ready：http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html.

---

我希望这能帮助任何遇到同样问题的人尝试使用这个很棒的示例应用程序。

验证JSON输出是否有效：在此处验证

将绑定事件更改为此，然后查看它是否工作

$('#moviesPage').bind('pageinit', function(event) {
    getMoviesList();
});

对此

$('#moviesPage').live('pageshow', function(event) { //or 'pagecreate'
    getMoviesList();
});

正如我所看到的，JS代码的其余部分还可以！

---

试试这个，看看是否有效。正如我所知，它应该！这是我在移动应用程序上使用的方法，效果非常好。

在每个应用程序的第一行运行

console.log（movie）

时是否会获得数据？@Adam感谢您的评论。实际上，我不知道如何使用

console.log（）

。我正在我的代码编辑器中处理我的文件，并将它们上载到我的服务器进行测试。添加该行，然后当您运行页面时，使用查看javascript数据和错误或向我发送linkIn firebug，您可以看到getJson没有运行，这意味着函数没有启动，因此行

$（'#moviesPage'）。bind（'pageinit'，function（event）{getMoviesList（）；}）

未将该页绑定到正确运行该函数。@Adam感谢您帮助我跟踪此问题。我使用的示例应用程序基于较旧版本的jQuery mobile。我将您在上一次评论中引用的代码更改为

$（document）。委派（“#moviesPage”，“pageinit”，function（）{…

它现在正在提取数据。我只需要修复

列表视图（'refresh'）

，我已经有了解决方案。再次感谢您的帮助！谢谢！这确实有效。您知道如何在加载页面之前让listview填充数据吗？我目前使用的是

pagebeforecreate

，但页面更改之前，页面具有默认的加载动画，但在listvie之前，页面是空白的检索到w数据。我希望在默认页面更改加载动画完成后立即填充listview。您可以尝试将加载符号放置在live事件的开始处。“$.mobile.showPageLoadingMsg（）；”，然后在json调用后用“$.mobile.hidePageLoadingMsg（）；”隐藏它。这样，至少在加载数据时，它会显示一个加载符号。

$('#moviesPage').live('pageshow', function(event) { //or 'pagecreate'
    getMoviesList();
});