2

jqueryは完全にロードされていますが、jsonデータはロードされていません。エラーも発生していません。

スクリプトは

$("#loadjson").click(function(){
$.getJSON('filename.json', function(data) {
  var items = [];

  $.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val + '</li>');
  });

  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});
});

jsonファイルは

{
  "name": "samsung",
  "product": "led tv",
  "rate": "23,000"
}

テンプレートは

<head>
<ul></ul>
<button>loadjson</button>
{% block js-custom %}
{% load static %}
<script src="{{ STATIC_URL }}scripts/jquery-1.9.1.min.js"></script>
<script src="{{ STATIC_URL }}scripts/modernizr-2.0.6.min.js"></script>
<script src="{{ STATIC_URL }}scripts/myscript.js"></script>
{% endblock %}
</head>

画面に名前、商品、レートを表示するためです。

スクリプトは適切にロードされていますが、エラー メッセージも表示されません。また、o/p も取得されません。jon ファイルがロードされていないと思っていました。これを行う際に助けてください。

このコードを機能させるために変更が必要な場合は、私を案内してください。

4

2 に答える 2

2

あなたのHTMLはすべてめちゃくちゃです。すべてが に詰め込まれてい<head>ますが、ID がない<button>ため、クリック ハンドラーは設定されません。また、doctype、<html>要素、および要素もありません<title>。まず、これを試してください：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    {% block js-custom %}
    {% load static %}
    <script src="{{ STATIC_URL }}scripts/jquery-1.9.1.min.js"></script>
    <script src="{{ STATIC_URL }}scripts/modernizr-2.0.6.min.js"></script>
    <script src="{{ STATIC_URL }}scripts/myscript.js"></script>
    {% endblock %}
</head>
<body>
    <button id="loadjson">Load JSON</button>
</body>
</html>

もう 1 つのヒント: Python コードとHTML/JavaScript を同時に処理することで、一度に多くのことを処理しようとしている可能性があります。これを行う場合、静的な HTML、JavaScript、および JSON ファイルを使用してすべてを行うことから始めます。Python ではなく、直接編集できる静的ファイルだけで、その内容を正確に確認し、ブラウザーの開発者ツールを使用してデバッグできます。(私のお気に入りは Chrome です。Firefox と Firebug を併用するか、最近のバージョンの IE に組み込まれている開発者ツールを使用することもできます。)

また、テスト中は、縮小されていないバージョンの jQuery と Modernizr を使用してください。そうすれば、意味のあるコードとスタック トレースが表示されます。

W3C Validatorを使用して HTML を検証します。

静的ファイルで動作するようになったら、Python コードを取得して同一のコンテンツを生成します。これは、両側を一度に把握しようとするよりも簡単です。

よく考えてみると、あなたが Python の達人で、本当の問題が HTML/JavaScript 側だけである場合、静的ファイルのアイデアはそれほど重要ではないかもしれません。しかし、少なくとも、View Source と Developer Tools を使用してブラウザーで物事を見る必要があります。ブラウザーが見るのはそれだけだからです。Python コードはまったく表示されず、そこから生成されたもののみが表示されます。

ところで、これは Chrome DevTools の優れた紹介です。Mozilla Developer Network (MDN)の優れたドキュメントも読んでください。実際、Google で HTML/CSS/JS 関連のアイテムを検索するときは、検索に "mdn" を追加して、MDN ドキュメントが確実に見つかるようにすると便利です。あらゆるトピックに関する高品質のドキュメント。

于 2013-04-08T15:38:10.480 に答える