Question

所以我正在尝试构建一个页面，它将从配置文件中读取所有链接图像和描述。我是JQuery的新手，所以我想在我去的时候想出来。我使用查询字符串来定义id，然后想在JSON文件中查找并更新配置文件中的所有详细信息。

这不起作用，但我不知道为什么。我不知道这是否正在读取JSON文件，不知道如何调试脚本。

好的，这是我的代码

<html>
<head>
    <title>Maps</title>

    <link href="MapStyles.css" rel="stylesheet" type="text/css"></link>
    <script src="js/jquery-2.1.0.min.js"></script>
    <script src="js/purl.js"></script>


    <script type="text/javascript">
        //Update stuff from query string
        $(document).ready(function() {
            var mapno = $.url().param("MapNo");
            mapno = 1;
            $.getJSON("maps.json", null, function(data) {

                $("#mapnum").text(data[mapno].MapDesc);
                $("#mappic").attr("src", data[mapno].MapImage);
                $("#maploc").text(data[mapno].MapArea);
            })

        })
    </script>
</head>

<body class="Allbody">

    <div class="MapHeading">
        <div class="MapNumber" id="mapnum"></div>
        <div class="MapArea" id="maploc"></div>
    </div>


    <div class="MapImg">
        <img id="mappic" alt="" src="" />
    </div>

    <div class="MapHeading">
        <div class="MapNavLeftArrow">
            <a id="prevlink" href="">
                <img alt="" class="NavImg" src="assets/Left_Arrow.png" />
            </a>
        </div>
        <div class="MapNavRightArrow">
            <a id="nextlink" href="">
                <img alt="" class="NavImg" src="assets/Right_Arrow.png" />
            </a>
        </div>
        <div class="MapTOC">
            <a id="dirlink" href="">
                <img alt="" class="NavImg" src="assets/TOC.png" />
            </a>
        </div>

    </div>

</body>

</html>

以下是我的JSON文件

的示例

 "Maps": {
    "Map": [
      {
        "-id": "1",
        "MapDesc": "Map 1",
        "MapArea": "Richmond",
        "MapImage": "assets/Map1.jpg",
        "GoogleRef": "https://www.google.com/maps/@-37.8112588,144.9935245,18z",
        "DNCLink": "/DNC.html?MapNo=1",
        "NavLeft": "Map.html?MapNo=1",
        "NavRight": "Map.html?MapNo=2",
        "NavTOC": "Directory.html"
      },
      {
        "-id": "2",
        "MapArea": "Richmond",
        "MapImage": "assets/Map2.jpg",
        "GoogleRef": "https://www.google.com.au/maps/@-37.8110093,144.9981776,18z",
        "DNCLink": "/DNC.html?MapNo=2",
        "NavLeft": "Map.html?MapNo=1",
        "NavRight": "Map.html?MapNo=3",
        "NavTOC": "Directory.html"
      },

Answer 1

试试这个

 $("#mapnum").text(data["Maps"].Map[0].MapDesc);
 $("#mappic").attr("src", data["Maps"].Map[0].MapImage);
 $("#maploc").text(data["Maps"].Map[0].MapArea);

我认为你的Json无效。缺少开始和结束{。

有效的Json应该是，

{
"Maps": {
    "Map": [

        {
            "-id": "1",
            "MapDesc": "Map 1",
            "MapArea": "Richmond",
            "MapImage": "assets/Map1.jpg",
            "GoogleRef": "https://www.google.com/maps/@-37.8112588,144.9935245,18z",
            "DNCLink": "/DNC.html?MapNo=1",
            "NavLeft": "Map.html?MapNo=1",
            "NavRight": "Map.html?MapNo=2",
            "NavTOC": "Directory.html"
        }, {
            "-id": "2",
            "MapArea": "Richmond",
            "MapImage": "assets/Map2.jpg",
            "GoogleRef": "https://www.google.com.au/maps/@-37.8110093,144.9981776,18z",
            "DNCLink": "/DNC.html?MapNo=2",
            "NavLeft": "Map.html?MapNo=1",
            "NavRight": "Map.html?MapNo=3",
            "NavTOC": "Directory.html"
        }

    ]
}

}

另一个JSON JQuery请求

1 个答案: