0

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

请帮助我做到这一点。

谢谢

4

1 回答 1

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 的代码段中，引号有错误，您还可以链接调用追加，以避免一遍又一遍地查找相同的标签：

$("#myList")
    .append("<li>" + value.item1 + "</li>")
    .append("<li>" + value.item2 + "</li>")
    .append("<li>" + value.item3 + "</li>");
于 2013-04-07T11:25:44.910 回答