Question

我有一个带有数据的jSON文件和一个jquery脚本，假设将这些数据放在一个列表中，但由于某种原因，根本没有任何内容被读取。

以下是代码

<div data-role="mainPage" data-theme="a">

<div data-role="header">
    <h1>My Title</h1>
</div>

<div data-role="content">
 <ul data-role="listview" id="fixturesList">

    </ul>
 </div>
</div>  

<script type="text/javascript">



$.getJSON("http://localhost/tutorials/results.json", function(matchTable){
//Start off with an empty list every time to get the latest from server
 $('#fixturesList').empty();

 //add the games to be played as a list
 $.each(matchTable, function(i, match){
  ('#fixturesList').append(generateMatchLink(match));
 });

 $('#fixturesList').listview('refresh');

});


function generateMatchLink(match){

    //debugger
    return '<li><a href="javascript:void(0)'
    + '" onclick="goToMovieDetailPage(\''
    + match.Home +'\')">' 
    + match.Home 
    + '</a></li>';
}

function goToMatchDetailPage(matchHome){

    //create the html template
    var matchPage = $("<div data-role='page' data-url=dummyUrl><div data-role='header'><h1>"
              + matchHome + "</h1></div><div data-role='content'><img border='0' src='
              http://www.songho.ca/opengl/files/gl_mvc01.png' width=204 height=288></img>    </div><div data-role='footer'><h4>" 
              + matchHome + "</h4></div></div>");

    //append the new page to the page contanier
    matchPage.appendTo( $.mobile.pageContainer);

    //go to the newly created page
    $.mobile.changePage(matchPage);
}

</script>

这是JSON文件

[{"Fix":"1","Home":"Manchester United","Away":"Aston Villa","Stadium":"Old Trafford"},{"Fix":"2","Home":"Crystal Palace","Away":"Chelsea","Stadium":"Selhurst Park "},{"Fix":"3","Home":"Southampton","Away":"Newcastle United","Stadium":"The Friends Provident St Marys Stadium"},{"Fix":"4","Home":"Stoke City","Away":"Hull City","Stadium":"Britannia Stadium"},{"Fix":"5","Home":"Swansea City","Away":"Norwich City","Stadium":"Liberty Stadium"},{"Fix":"6","Home":"West Bromwich Albion","Away":"Cardiff City","Stadium":"The Hawthorns"},{"Fix":"7","Home":"Arsenal","Away":"Manchester City","Stadium":"Emirates Stadium"},{"Fix":"8","Home":"Fulham","Away":"Everton","Stadium":"Craven Cottage"},{"Fix":"9","Home":"Liverpool","Away":"Tottenham Hotspur","Stadium":"Anfield"}]

是否有遗漏的东西我忽略了？

Answer 1

此行$中缺少('#fixturesList').append(generateMatchLink(match));，请将其更改为

$.each(data, function(i, match){
 $('#fixturesList').append(generateMatchLink(match));
});

另外，尝试使用相对url来获取json ..

Answer 2

将您的脚本移到$（document）.ready（function（）{}）中。 dom尚未准备好以其他方式添加内容。

http://api.jquery.com/ready/

Answer 3

('#fixturesList').append(generateMatchLink(match));

应该是

$('#fixturesList').append(generateMatchLink(match));

还有第二个问题，也许是由于复制/粘贴：

var matchPage = $("<div data-role='page' data-url=dummyUrl><div data-role='header'><h1>"
          + matchHome + "</h1></div><div data-role='content'><img border='0' src='
          http://www.songho.ca/opengl/files/gl_mvc01.png' width=204 height=288></img>    </div><div data-role='footer'><h4>" 
          + matchHome + "</h4></div></div>");

Javascript字符串不能包含换行符。修复如下：

var matchPage = $("<div data-role='page' data-url=dummyUrl><div data-role='header'><h1>"
          + matchHome + "</h1></div><div data-role='content'><img border='0' src='http://www.songho.ca/opengl/files/gl_mvc01.png' width=204 height=288></img>    </div><div data-role='footer'><h4>" 
          + matchHome + "</h4></div></div>");

JQuery文件似乎没有被Jquery读取

3 个答案: