为什么ajax请求重复？答案

【问题标题】：Why ajax request repeat?为什么ajax请求重复？
【发布时间】：2017-11-20 23:12:53
【问题描述】：

我正在尝试从 jsonplaceholder.typicode.com JSON 获取待办事项标题。我有三个按钮，每个按钮都有和 id，该 id 与 json todo 相关。当您单击一个按钮时，您会看到该 json todo 的标题。

按钮 1 = jsonplaceholder.typicode.com/todos/1
按钮 2 = jsonplaceholder.typicode.com/todos/2
等..

$('button').click(function (event) {
    var id = event.target.id;
    console.log(id);
    $.ajax({
        url: "https://jsonplaceholder.typicode.com/todos/" + id,
        type: "GET"
    }).done(function (data) {
        $('#result').append('<div class="todo"></div>');
        $.each(data, function (key, value) {
            if (key == "title") {
                $('.todo').append('<p>' + key + ': ' + value + '</p>');
            }
        });
    }).fail(function (event) {
        alert(event.status);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="1">A</button>
<button id="2">B</button>
<button id="3">C</button>
<div id="result">
</div>

问题是每次单击按钮时标题都会重复。为什么会出现这种情况？

【问题讨论】：

因为每次点击，你都会再次执行$('#result').append('<div class="todo"></div>');，然后追加到所有todo div。

标签： javascript jquery json ajax

【解决方案1】：

为什么？因为每次单击按钮时都会附加另一个<div class="todo"></div>，然后将内容附加到每个存在的内容

您可以隔离新的<div class="todo"> 并仅将新内容附加到该<div class="todo"> 上

var $todo = '<div class="todo"></div>'
$('#result').append($todo);
$.each(data, function(key, value) {
  if (key == "title") {
    $todo.append('<p>' + key + ': ' + value + '</p>');
  }
});

如果您不想通过更改看到第一组，请在添加新内容之前清空$('#result')：

$('#result').append('<div class="todo"></div>');

到

$('#result').html('<div class="todo"></div>');

【讨论】：

【解决方案2】：

在每个 ajax done 回调中，您首先创建一个新的 todo div：

$('#result').append('<div class="todo"></div>');`

然后，您将结果添加到具有todo 类的所有元素：

$('.todo').append('<p>' + key + ': ' + value + '</p>');

我建议删除第一行并将第二行更改为$('#result')

【讨论】：