在 $.getJSON 中使用 $.each()

Posted 2023-05-08

【中文标题】在 $.getJSON 中使用 $.each()

【英文标题】：Using $.each() within $.getJSON

【发布时间】：2012-03-16 01:03:51

【问题描述】：

这是一个使用 1.0.1 版本的 jQuery Mobile 应用程序。

我正在尝试从我的getmovies.php 文件中获取数据，该文件输出 JSON，用于将数据附加到我的 html 页面上的无序列表的 jQuery 函数中。

我的 HTML 页面显示正确，但 getMoviesList() 函数没有附加任何列表项，因此内容区域留空。

我的猜测是我的 $.each() 函数有问题。我对 PHP 更熟悉，但尝试更熟悉 jQuery 和 JSON，以便在 jQuery Mobile 应用程序中移动数据。

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');
  );

我的 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 -->

我正在尝试修改以下示例应用以满足我的需求：http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/。

感谢您提供的任何帮助。

【问题讨论】：

在 each 的第一行运行 console.log(movie) 时是否得到数据？

@Adam 感谢您的评论。我实际上不确定如何使用console.log()。我正在代码编辑器中处理我的文件并将它们上传到我的服务器进行测试。

添加该行，然后在运行页面时使用getfirebug.com 查看javascript数据和错误或将链接发送给我

在 firebug 中，您可以看到 getJson 没有运行，这意味着该函数没有触发，因此 $('#moviesPage').bind('pageinit', function(event) getMoviesList(); ); 行没有将该页面绑定到正确运行该函数。

@Adam 感谢您帮助我找出问题所在。我使用的示例应用程序基于旧版本的 jQuery mobile。我将您在上一条评论中引用的代码更改为$( document ).delegate("#moviesPage", "pageinit", function() ...，它现在正在提取数据。我只需要修复listview('refresh')，我已经有了解决方案。再次感谢您的帮助！

【参考方案1】：

验证您的 JSON 输出是否有效：在此处验证 jsonlint.com

将您的绑定事件更改为此并查看它是否有效。

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

到这里

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

如我所见，其余的 JS 代码没问题！ 试试这个，看看它是否有效。据我所知，应该！这是我在移动应用上使用的方法，效果很好。

【讨论】：

谢谢！这确实有效。您知道如何在加载页面之前让列表视图填充数据吗？我目前正在使用pagebeforecreate，但是页面在页面更改之前有默认的加载动画，但是在检索到listview数据之前页面是空白的。我希望在默认页面更改加载动画完成后立即填充列表视图。

您可以尝试将加载符号放在直播活动的开始。 “$.mobile.showPageLoadingMsg();”然后在您的 json 调用后使用“$.mobile.hidePageLoadingMsg();”将其隐藏。这样，至少在加载数据时，它会显示加载符号。

【参考方案2】：

在亚当的帮助下，我能够缩小问题的范围。

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

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

到：

$( document ).delegate("#employeeListPage", "pageinit", function()  getEmployeeList(); );

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

我希望这可以帮助任何在尝试使用这个出色的示例应用时遇到相同问题的人。