JSON文件似乎不能被Jquery读取

JSON file appears not to be reading by Jquery

本文关键字：Jquery 读取 不能 文件 JSON      更新时间：2023-09-26

我有一个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"}]

是不是我忽略了什么?

('#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>");

您在这一行缺少$, ('#fixturesList').append(generateMatchLink(match));更改为，

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

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

将脚本移动到$(document).ready(function(){})中。否则，dom还没有准备好添加内容。

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

相关文章：