HTML：

Question

我只是jQuery Mobile的新手，所以我不确定在我的搜索中使用什么术语，所以这可能是重复的。

我正在尝试使用jQuery Mobile和JSON创建一个简单的列表应用程序，但我似乎无法从我的JSON文件中检索数据。我从another Stack Overflow question had this jsfiddle得到了我的代码，我几乎可以肯定我已经正确地复制了它，但是当我在本地主机上打开它时，没有列表项填充到我的第一个'页面'。

我对此非常陌生，所以我非常感谢您对答案的任何解释以及任何帮助！

控制台错误是：

jquery-1.11.1.min.js：4获取localhost / ListApp / html / JSON / list_data.json 404（未找到）
VM1411：5未捕获的TypeError：无法读取null的属性'removeAttribute'
未捕获的SyntaxError：意外的令牌：在我的jquery mobile js文件

到目前为止，我们的代码在这里：

HTML：

private void AddFormAsTab<T>(T obj) { ... }

JSON：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>LIST APP</title>

    <link rel="stylesheet"href="../CSS/stylesheet.css"/>
    <link rel="stylesheet" href="../CSS/jquery.mobile.theme-1.4.5.min.css"/>
    <link ref="stylesheet" href="../CSS/jquery.mobile.icons-1.4.5.min.css"/>
    <link rel="stylesheet" href="../CSS/jquery.mobile-1.4.5.min.css"/>
    <link rel="stylesheet" href="../CSS/jquery.mobile.structure-1.4.5.min.css"/>
    <link rel="stylesheet" href="../CSS/bootstrap.min.css"/>


    <script src="../JS/jquery-1.11.1.min.js"></script>
    <script src="../JS/jquery.mobile-1.4.5.min.js"></script>
    <script src="../JS/jquery.mobile.structure-1.4.5.min.css"></script>
    <script src="../JS/jquery.mobile.theme-1.4.5.min.css"></script>
    <script src="../JS/jquery.mobile.icons-1.4.5.min.css"></script>
    <script src="../JS/bootstrap.min.js"></script>
    <script src="../JS/listApp.js"></script>


</head>

 <body>
<div data-role="page" id="filterPage">
    <div data-role="header" data-theme="b">
         <h1>List App</h1>

    </div>
    <div data-role="content">
        <ul data-role="listview" id="mainList" data-divider-theme="a" data-inset="false">
            <li data-role="list-divider" data-theme="b" role="heading">Names</li>
        </ul>
    </div>
</div>  


    <div data-role="page" id="secondaryDetails">
        <div data-role="content"></div>
        </div>            
    </div>

</body>   

</html>

JQUERY：

var info = [{
        "id": 89,
        "age": 35,
        "name": "Amelia Mcknight",
        "gender": "female",
        "company": "Colaire",
        "email": "ameliamcknight@colaire.com",
        "phone": "+1 (949) 563-3174",
        "address": "107 Nevins Street, Titanic, Georgia, 5057"
}, {
        "id": 88,
        "age": 30,
        "name": "Briggs Robinson",
        "gender": "male",
        "company": "Otherway",
        "email": "briggsrobinson@otherway.com",
        "phone": "+1 (804) 517-2941",
        "address": "897 Grand Street, Madaket, Ohio, 2793"
},
];

Answer 1

请尝试以下代码。

HTML文件：

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>LIST APP</title>

  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
    <script>
	
$(document).on("pageinit", "#filterPage", function () {
$.getJSON("../JSON/list_data.json", function(info){
    var li = "";
    $.each(info, function (i, name) {
        li += '<li><a href="#" id="' + i + '" class="info-go">' + name.name + '</a></li>';

    $("#mainList").append(li).promise().done(function () {

        $(this).on("click", ".info-go", function (e) {
            e.preventDefault();
            $("#secondaryDetails").data("info", info[this.id]);
          

            $.mobile.changePage("#secondaryDetails");
        });


        $(this).listview("refresh");
	});
});
});
});



$(document).on("pagebeforeshow", "#secondaryDetails", function () {

    var info = $(this).data("info");

    var info_view = "";

    for (var key in info) {
        info_view += '<div class="ui-grid-a"><div class="ui-block-a"><div class="ui-bar field" style="font-weight : bold; text-align: left;">' + key + '</div></div><div class="ui-block-b"><div class="ui-bar value" style="width : 75%">' + info[key] + '</div></div></div>';
    }

    $(this).find("[data-role=content]").html(info_view);
});
	
	
	</script>


</head>

 <body>
<div data-role="page" id="filterPage">
    <div data-role="header" data-theme="b">
         <h1>List App</h1>

    </div>
    <div data-role="content">
        <ul data-role="listview" id="mainList" data-divider-theme="a" data-inset="false">
            <li data-role="list-divider" data-theme="b" role="heading">Names</li>
        </ul>
    </div>
</div>  


    <div data-role="page" id="secondaryDetails">
        <div data-role="content"></div>
        </div>            
    </div>

</body>   

</html>

＆＃13;

JSON文件：

＆＃13;

[{
        "id": 89,
        "age": 35,
        "name": "Amelia Mcknight",
        "gender": "female",
        "company": "Colaire",
        "email": "ameliamcknight@colaire.com",
        "phone": "+1 (949) 563-3174",
        "address": "107 Nevins Street, Titanic, Georgia, 5057"
}, {
        "id": 88,
        "age": 30,
        "name": "Briggs Robinson",
        "gender": "male",
        "company": "Otherway",
        "email": "briggsrobinson@otherway.com",
        "phone": "+1 (804) 517-2941",
        "address": "897 Grand Street, Madaket, Ohio, 2793"
}
]

＆＃13;

Answer 2

按照docs

中的建议，为您的JSON调用添加一些错误检查

$.getJSON( "../JSON/list_data.json", function(info){
  // your function
  console.log( "success" );
})
  .done(function() {
    console.log( "second success" );
  })
  .fail(function( jqxhr, textStatus, error ) {
    var err = textStatus + ", " + error;
    console.log( "Request Failed: " + err );
  .always(function() {
    console.log( "complete" );
  });

并查看是否正确加载了JSON数据。另外，请检查控制台是否有错误消息。

Answer 3

您的JSON是错误的....请立即检查正确的JSON ..您错过了JSON对象中的结束引号。正确的JSON应该是

var info = [{
            "id": 89,
            "age": 35,
            "name": "Amelia Mcknight",
            "gender": "female",
            "company": "Colaire",
            "email": "ameliamcknight@colaire.com",
            "phone": "+1 (949) 563-3174",
            "address": "107 Nevins Street, Titanic, Georgia, 5057"
    }, {
            "id": 88,
            "age": 30,
            "name": "Briggs Robinson",
            "gender": "male",
            "company": "Otherway",
            "email": "briggsrobinson@otherway.com",
            "phone": "+1 (804) 517-2941",
            "address": "897 Grand Street, Madaket, Ohio, 2793"
    },
    ];

你在JS实现中也有很多语法错误也是语法错误。请在

之后检查正确的实现

$.getJSON(info, function(info){

$(document).on("pageinit", "#mainList", function () {

    var li = "";
    $.each(data, function (i, name) {
        li += '<li><a href="#" id="' + i + '" class="info-go">' + name.name + '</a></li>';

    $("#mainList").append(li).promise().done(function () {

        $(this).on("click", ".info-go", function (e) {
            e.preventDefault();
            $("#secondaryDetails").data("info", info[this.id]);

            $.mobile.changePage("#secondaryDetails");
        });


        $(this).listview("refresh");

});

$(document).on("pagebeforeshow", "#secondaryDetails", function () {

    var info = $(this).data("info");

    var info_view = "";

    for (var key in info) {
        info_view += '<div class="ui-grid-a"><div class="ui-block-a"><div class="ui-bar field" style="font-weight : bold; text-align: left;">' + key + '</div></div><div class="ui-block-b"><div class="ui-bar value" style="width : 75%">' + info[key] + '</div></div></div>';
    }

    $(this).find("[data-role=content]").html(info_view);
});
    });

     });
});

请尝试在浏览器中检查控制台是否有错误。

jQuery Mobile：无法检索JSON数据以填充HTML上的列表

HTML：

JSON：

JQUERY：

3 个答案: