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>所以你的点击处理程序永远不会被设置。也没有文档类型，没有<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>

另一个提示：您可能试图通过同时处理 Python 代码和HTML/JavaScript来一次性解决太多问题。如果我这样做，我会从使用静态 HTML、JavaScript 和 JSON 文件开始。没有 Python，只有静态文件，您可以直接编辑，查看其中的确切内容，并使用浏览器的开发人员工具进行调试。（我最喜欢的是 Chrome，或者您可以将 Firefox 与 Firebug 或最新版本的 IE 中的内置开发人员工具一起使用。）

此外，在测试时使用 jQuery 和 Modernizr 的非缩小版本。这样，您将看到有意义的代码和堆栈跟踪。

并使用W3C Validator验证您的 HTML 。

在你让它处理静态文件之后，然后让你的 Python 代码生成相同的内容。这比试图同时找出双方更容易。

再想一想，如果您是 Python 专家，而唯一真正的麻烦是 HTML/JavaScript 方面，那么静态文件的想法可能并不那么重要。但至少您应该使用查看源代码和开发工具查看浏览器中的内容，因为这就是浏览器所看到的全部内容。它根本看不到您的 Python 代码，只有从中生成的代码。

顺便说一句，这是对 Chrome DevTools 的精彩介绍。还可以阅读Mozilla Developer Network (MDN)上的优秀文档。事实上，当您在 Google 上查找任何与 HTML/CSS/JS 相关的项目时，将“mdn”添加到您的搜索以确保它为您找到 MDN 文档很有用，因为它们通常是最好的——任何主题的高质量文档。

于 2013-04-08T15:38:10.480 回答
1

使用append()或html()附加li到创建ul 试试这个

$('<ul/>', {
'class': 'my-new-list'
}).html(items.join('')).appendTo('body');
于 2013-04-08T15:09:41.033 回答