jQuery 移动设备：无法检索 JSON 数据以填充 HTML 上的列表

Question

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

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

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

控制台错误是：

jquery-1.11.1.min.js:4 GET localhost/ListApp/html/JSON/list_data.json 404（未找到）
VM1411:5 未捕获类型错误：无法读取属性 'removeAttribute' of null
未捕获的语法错误：意外的令牌：在我的 jquery 移动 js 文件上

到目前为止，这是我的代码：

HTML:

<!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>

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"
},
];

JQUERY:

$.getJSON("../JSON/list_data.json", 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]);
          index.html#secondaryDetails

            $.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);
});
    });

     });
});
});

Answer 1

按照 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 2

您的 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 实现中也有很多语法错误语法 Errors.Please 在

之后检查正确的实现

$.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);
});
    });

     });
});

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

Answer 3

试试下面的代码。

HTML 文件:

<!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>

JSON 文件：

[{
        "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"
}
]

jQuery 移动设备：无法检索 JSON 数据以填充 HTML 上的列表

jQuery Mobile: Can't retrieve JSON data to populate list on HTML

html

javascript

jquery

json

jquery-mobile

HTML:

JSON:

JQUERY: