1

您好，我正在创建一个仅使用 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>');
4

5 回答 5

2

不知道为什么你for在$.each(). 没有必要。相反，尝试

$.each(response, function(id,route) {
    nav.append('<li><a href="index.html/#/' + route.target + '">' + route.pattern + '</a></li>');
});
于 2012-11-02T11:40:44.740 回答
1

示例 Json 

 "yyyList": [
        {
          "Id": "1",
          "Name": "aaaa "
        }, {
          "Id": "2",
          "Name": "bbb "
        }, {
          "Id": "6",
          "Name": "ccc "
        }, {
          "Id": "7",
          "Name": "ddd "
        } ]


$.ajax({
              url: "URL",
               //data: "",
               type: "GET",
               dataType: 'json',
               success: function (data) {            
               $.each(data.YYYList, function () {
                  $('#state').append('<'li value='+this.Id+'>'+this.Name+'<'/li>');
               });
            }
        })

$('#state') ---> 为 HTML 中的 UL 标记提供相同的 id 请更正它的选项语法

于 2012-11-02T11:38:53.317 回答
0

如果您收到 JSON 响应，您可以使用$.parseJSON().

尝试类似：

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

    var obj = jQuery.parseJSON(response);
    for(var ele in obj){
      nav.append('<li><a href="index.html/#/' + obj[ele].target + '">' + obj[ele].pattern + '</a></li>');
    }

  }

});
于 2012-11-02T11:42:30.513 回答
0

您将对象视为 JavaScript 数组。为什么不使用数组呢？

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

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

更新

实际上，Abhilash 的答案保留了您的结构。您的问题是您的$.each()签名没有说明第一个参数是索引，第二个参数是集合中的项目。我假设您需要路线的名称，而不是目标，所以这就是我以我的方式回答的原因。如果您不需要它，那么 Abhilash 的答案会更好（恕我直言），因为它保留了您的结构。

于 2012-11-02T11:35:48.067 回答
0

我认为问题在于您将它更像是一个数组，但实际上它是一个对象。尝试这个：

$.each(response, function(route) {
    console.log(response[route])
    nav.append('<li><a href="index.html/#/' + response[route].target + '">' + response[route].pattern + '</a></li>');
});
于 2012-11-02T11:41:24.113 回答