jQuery AJAX每个循环都使用append和html

jQuery AJAX each loop using append and html

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

HTML：

1
2
3
4

<ul id="myorders">
</ul>

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

JS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

数据示例：

1
2
3
4
5
6
7
8
9

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

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

工作提琴。

.one() : Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$("#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，

标记应为ul的直接子代，因此应删除p。

希望这可以帮助。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

1
2
3
4
5