0

json ファイルにはいくつかのデータがあります。jQuery を使用して、ページに表示する必要があります。

.json ファイルは

{
"p1":{
      "item1":"apple",
      "item2":"orange",
      "item3":"banana",
      },
"p2":{
      "item1":"water",
      "item2":"milk",
      "item3":"alcohol",
     }
}

私のテンプレートは

<html>
    <head>
    <body>
    <ul></ul>
    <button></button>
    <script src="script/jquery-1.9.1,min.js" type="text/javascript"></script>
    <script src="script/myscript.js" type="text/javascript"></script>
    </body>
    </head>
</html>

myscript.js ファイルは

$("button").click(function(){
    $.getJSON("item.json",function(obj){
       $.each(obj,function(key,value){
          $("ul").append("<li>+value.item1+"</li>");
          $("ul").append("<li>+value.item2+"</li>");
          $("ul").append("<li>+value.item3+"</li>");
       });
    });
});

ページの「getjson」ボタンを押している間にJsonデータがページにロードされますが、ページが更新されていません。daatがロードされていません。 python を使用して py を実行します。

これを行うのを手伝ってください。

ありがとう

4

1 に答える 1

1

まず、JQuery の on-ready 関数 ( http://api.jquery.com/ready/ )の使用を検討する必要があります。

$(function() {
   ...
});

この方法では、すべての html が読み込まれるとコードが実行され、<script>-Tag の順序を (たとえば head セクションに) 切り替えてボタンが突然見つからないため、問題が発生することはありません。

次に、キャサリンがコメントで述べたように、ボタンを識別するために ID またはクラスを指定する必要があります。それがなくても機能するはずですが、確認したところ、機能していないようです。次に、IDにCSSセレクターを使用できます$("#MyButton")

<button id="MyButton">My Button</button>
<script type="text/javascript">
    $(function() {
        $("#MyButton").click(function() { 
        });
    });
</script>

次に、JSON-Part があります。$.getJSON(url, data, success). そのため、最初に json ファイルへの URL が必要になります。URL を取得する方法は、ファイルの場所によって異なります。ビューの場合は、ビューへのリンク ({% url "project.app.views.get_json" %}例) または静的ファイル (例)を含めます{{STATIC_URL}}/js/data/file.json。ファイルが Fixtures-dir にある場合は、必要に応じて、ビューを作成する必要があります。ビューを作成すると、そのファイルが読み込まれ、コンテンツが応答として返されるか、静的フォルダーの 1 つにファイルがコピーされます。Javascript (クライアント側) がサーバー (サーバー側) 上のファイルを見つけることを期待しても、サーバー上の一部がファイルを提供しなければ機能しません。(同様の目的で、ビューの戻り値 - python-dict、配列、値 - を json としてレンダリングし、適切な HttpResponse-Object を作成する小さなデコレータがあります)

このdataパラメーターはスキップされる可能性があるため、最後のパラメーターは success-callback です。

<button id="MyButton">My Button</button>
<script type="text/javascript">
    $(function() {
        $("#MyButton").click(function() { 
            $.getJSON("your url here", function(data) {
                console.log(data); #Print the data to console
            }).fail(function() {
                console.log("Something went wrong with the request!");
            });
        });
    });
</script>

そこからデータにアクセスできるはずです。次のようなコールバックfail()については、API を参照してください: http://api.jquery.com/jQuery.getJSON/ 注: データを ul に追加するためのスニペットでは、引用符にエラーがあり、呼び出しをチェーンすることもできます。追加するには、同じタグを何度も検索しないようにします。

$("#myList")
    .append("<li>" + value.item1 + "</li>")
    .append("<li>" + value.item2 + "</li>")
    .append("<li>" + value.item3 + "</li>");
于 2013-04-07T11:25:44.910 に答える