Question

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文件没有加载。请帮我这样做。

如果必须对此代码进行任何更改，请引导我。

Answer 1

你的HTML搞砸了。您已将所有内容填入<head>，并且<button>上没有ID，因此您的点击处理程序永远不会被设置。此外，没有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>

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

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

使用W3C Validator验证您的HTML。

使用静态文件后，获取Python代码以生成相同的内容。这比试图同时弄清双方更容易。

第二个想法，如果你是Python的高手，唯一真正的麻烦是HTML / JavaScript方面，静态文件的想法可能不那么重要。但至少你应该使用View Source和Developer Tools查看浏览器中的内容，因为这是所有浏览器都能看到的。它根本看不到你的Python代码，只看到它产生的代码。

顺便说一句，这是一个很棒的introduction to the Chrome DevTools。另请阅读Mozilla Developer Network (MDN)上的优秀文档。事实上，当您在Google上查找任何HTML / CSS / JS相关项目时，在搜索中添加“mdn”以确保它为您找到MDN文档非常有用，因为它们通常是最好的 - 关于任何主题的高质量文档。

Answer 2

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

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

在python中使用jquery未加载json数据

2 个答案: