在 Python 中使用 jquery 获取 json 数据并显示答案

【问题标题】：fetching json data and display using jquery in Python在 Python 中使用 jquery 获取 json 数据并显示
【发布时间】：2013-04-06 12:55:32
【问题描述】：

包含一些数据的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 数据，但页面正在刷新，没有加载任何数据。如何做到这一点，我认为上面的代码中有一些错误，或者我是否需要编写任何函数在views.py中使用python。

请帮我做这件事。

谢谢

【问题讨论】：

您遇到什么错误？您需要将 django 服务器的 url 传递给 $.getJSON() 函数。
我什么也没得到，只是按下按钮时页面会刷新
item.json 文件存储在哪里？它是否由您的 django 服务器提供服务？
按钮点击必须是$("#button").click(function(){，忘了#，还要放正确的json文件路径
item.json 在我的应用文件夹中，位置是 /fixtures/item.json

标签： jquery python django json django-views

【解决方案1】：

首先，您应该考虑使用 JQuery on-ready 函数 (http://api.jquery.com/ready/)：

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

这样，一旦加载了所有 html，您的代码就会执行并且您不会遇到问题，因为您切换了 <script>-Tag 的顺序（例如进入头部）并且您的按钮突然找不到.

其次，正如凯瑟琳在评论中提到的，你应该给你的按钮一个 id 或类，以识别它。没有它它也应该工作，但我刚刚检查过，这似乎不起作用。然后你可以使用 CSS-Selector 作为 id $("#MyButton")

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

接下来是 JSON 部分。 $.getJSON(url, data, success)。所以首先你需要 json 文件的 url。如何获取 url 取决于您的文件在哪里。如果是视图，请包含指向视图（例如{% url "project.app.views.get_json" %}）或静态文件（例如{{STATIC_URL}}/js/data/file.json）的链接。如果文件在您的fixtures-dir中，那么您必须创建一个视图，加载该文件并将内容作为响应返回，或者将文件复制到静态文件夹之一，具体取决于您想要的内容。期望 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 的 sn-p 中，引号有错误，您还可以链接调用 append，以避免一遍又一遍地查找相同的标签：

$("#myList")
    .append("<li>" + value.item1 + "</li>")
    .append("<li>" + value.item2 + "</li>")
    .append("<li>" + value.item3 + "</li>");

【讨论】：