1

こんにちは私はServerSide言語を使用できないため（サーバーはそれらをサポートしていません）、HTML / CSSとJavascriptだけでシンプルなWebサイトを作成しています。現在、jQuery / AJAXを使用して、Javascriptの知識が少ない場合でもWebサイトのルーティングを作成しています。私はなんとか最も多くを作成することができました。しかし、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

オブジェクトを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()署名が最初のパラメーターがインデックスであり、2番目のパラメーターがコレクション内のアイテムであることを考慮していないことでした。ターゲットではなく、ルートの名前が必要だと思っていたので、私は自分のやり方で答えました。あなたがそれを必要としないならば、それがあなたの構造を保つので、Abhilashの答えはより良いです（IMHO）。

于 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 に答える
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 に答える