Question

我希望从以下代码中检索json文件的数据，但问题是，如果我再次按下按钮，我会看到两次结果。我将每个循环的第一个附加内容更改为html，但之后只加载了json的最后一个对象。

HTML：

<ul id="myorders"></ul>
<button type="button" id="add-order">Load the orders</button>

JS：

$("#add-order").click(function(){ 

    $.getJSON('API/orders.json', function(data){

        $.each(data, function(i, order){
            $("#myorders").append("<p><li> id: " + data[i].order.id + "</li>");
            $("#myorders").append("<li> Name: " + data[i].order.name + "</li>");
            $("#myorders").append("<li> Drink: " + data[i].order.drink + "</li></p>")
        });         
    });
});

数据示例：

[{ "order":{"id": "1",
    "name": "Bill",
    "drink": "Capuccino"}},


  { "order":{"id": "2",
    "name": "Sofia",
    "drink": "Late"
}}]

Answer 1

<强> Working fiddle

.one() ：将处理程序附加到元素的事件。每个事件类型的每个元素最多执行一次处理程序。

您可以使用会触发一次点击的JQuery one()：

$("#add-order").one("click", function(){ 
    $.getJSON('API/orders.json', function(data){

        var my_orders = $("#myorders");

        $.each(data, function(i, order){
            my_orders.append("<li> id: " + data[i].order.id + "</li>");
            my_orders.append("<li> Name: " + data[i].order.name + "</li>");
            my_orders.append("<li> Drink: " + data[i].order.drink + "</li>")
        });    
    }); 
});

注意：如果您添加了无效的HTML，则<li>代码应该是ul的直接子代，因此您应该删除p。

希望这有帮助。

＆＃13;

var data = [{ "order":{"id": "1",
    "name": "Bill",
    "drink": "Capuccino"}},


  { "order":{"id": "2",
    "name": "Sofia",
    "drink": "Late"
}}]

$("#add-order").one("click", function(){ 
  var my_orders = $("#myorders");

  $.each(data, function(i, order){
    my_orders.append("<li> id: " + data[i].order.id + "</li>");
    my_orders.append("<li> Name: " + data[i].order.name + "</li>");
    my_orders.append("<li> Drink: " + data[i].order.drink + "</li>")
  });   
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myorders"></ul>
<button type="button" id="add-order">Load the orders</button>

＆＃13;

Answer 2

我刚刚发现该解决方案存在问题...如果更改/更新json文件的数据，则必须重新加载页面，因为one（）已经使用一次。

jQuery AJAX每个循环使用append和html

2 个答案: