json - 使用 JSON 的 jQuery/AJAX 路由

Question

您好，我正在创建一个仅使用 HTML/CSS 和 Javascript 的简单网站，因为我无法使用服务器端语言(服务器不支持它们)，现在我正在使用 jQuery/AJAX 甚至使用我的我设法创造了最多的 Javascript 知识。但我不知道如何从 JSON 文件中获取正确的索引。

JSON文件如下:

{
  "home": {
      "pattern": "/home",
      "target":  "home.html"
  },
  "webshop": {
      "pattern": "/webshop",
      "target":  "webshop.html"
  }
}

我在index.html中使用的jQuery如下:

<script type="text/javascript">
$(document).ready(function() {
//wacht op laden pagina

$.ajax({
  url: 'routing.json',
  async: false,
  dataType: 'json',
  success: function (response) {
    // do stuff with response.
    var nav = $('.nav_menu ul');

    $.each(response, function(route) {
        for(var i=0;i<route.length;i++){
        console.log("route["+i+"] is =>"+route[i]);
    }
        nav.append('<li><a href="index.html/#/' + route + '">' + route + '</a></li>');

    });

  }

});

});
</script>

现在的问题是，在我的 jQuery 部分中，我不知道如何创建正确的链接(请参阅路线)

nav.append('<li><a href="index.html/#/' + route + '">' + route + '</a></li>');

Answer 1

不确定为什么在 $.each() 中还有一个 for 循环。没有必要。相反，尝试

$.each(response, function(id,route) {
    nav.append('<li><a href="index.html/#/' + route.target + '">' + route.pattern + '</a></li>');
});