jQuery AJAX 每个循环使用 append 和 html答案

【问题标题】：jQuery AJAX each loop using append and htmljQuery AJAX 每个循环使用 append 和 html
【发布时间】：2016-04-02 08:00:38
【问题描述】：

我想从下面的代码中检索 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"
}}]

【问题讨论】：

标签： jquery ajax

【解决方案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。

希望这会有所帮助。

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

<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>

【讨论】：

我同意您的回答以及 html 错误。不需要“p”标签，并且会导致间距错误。在 li 标签中，他只能使用“a”标签和 span 标签，我认为不需要它们。他最多可以添加一个 ul 包装器。
很高兴帮助@Zakaria。我喜欢最终的结果，干净简单。使用 ul 标记进行 DOM 跟踪很聪明。
非常感谢 Zakaria 纠正我的帖子。我删除了
并在循环结束时用
替换它，因此 json 文件的第二个对象与输出中的第一个对象分开。在大多数情况下，我还使用了 one() 而不是 bind () ，这是“通常”的一种。有效！谢谢！！不知道one()。现在知道了...也感谢 Sparky 的评论。

【解决方案2】：

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

【讨论】：

您没有提到这是 ajax 例程的一部分。现在 .one() 必须在使用后重置。换句话说，页面更改必须在不刷新页面的情况下重置 .one() 函数。我一直在搜索，但没有太多关于该函数的详细信息，除非它是隐式的非 ajax 兼容函数。
我转而使用 getJSON，所以我想你明白我在谈论 ajax 请求。现在关于您的想法...有趣的一个，可能难以实施可能不会...不知道...如果您获得任何有关它的信息，请告诉我。谢谢 Sparky256