Question

这适用于使用版本1.0.1的jQuery Mobile应用程序。

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

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

感谢您提供的任何帮助。

Answer 1

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

如果您正在使用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(); });

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

我希望这可以帮助任何遇到同样问题的人尝试使用这个优秀的示例应用。

Answer 2

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

将绑定事件更改为此事件并查看它是否正常工作。

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

到这个

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

正如我所看到的，JS代码的其余部分都可以！试试这个，看看它是否有效。据我所知，它应该！这是我在移动应用上使用的方法，效果很好。

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

2 个答案: