Question

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>");
       });
    });
});

Json数据加载到页面中，同时按下页面中的“getjson”按钮但是页面正在刷新没有daat得到加载。如何做到这一点，我认为上面的代码中有一些错误或者我是否需要编写任何函数在views.py中使用python。

请帮我这样做。

谢谢

Answer 1

首先，您应该考虑使用JQuery就绪函数（http://api.jquery.com/ready/）：

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

这样你的代码就会在加载所有html后执行而你不会遇到问题，因为你切换了<script> - 标签的顺序（例如进入头部）而你的按钮突然出现了没找到。

其次，正如凯瑟琳在评论中提到的那样，你应该给你的按钮一个id或类，以识别它。它应该没有它，但我只是检查，但似乎没有工作。然后，您可以使用CSS-Selector作为标识$("#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 "project.app.views.get_json" %}）或静态文件（例如{{STATIC_URL}}/js/data/file.json）。如果文件位于fixtures-dir中，则必须创建视图，然后加载该文件并将内容作为响应返回，或者将文件复制到其中一个静态文件夹，具体取决于您的需要。期望Javascript（客户端）在您的服务器（服务器端）上找到一个文件不会工作，没有一些部分在提供该文件的服务器上。（出于类似的目的，我有一个小装饰器，它将视图的返回值 - python-dict，数组，值 - 呈现为json并创建一个适当的HttpResponse-Object）

可以跳过data参数，因此最后一个参数是成功回调：

<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>");

在Python中使用jquery获取json数据和显示

1 个答案: