Question

我正在尝试从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>

问题是每次点击按钮都会重复标题。为什么会这样？

Answer 1

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

您可以隔离新<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>');

Answer 2

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

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

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

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

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

为什么ajax请求重复？

2 个答案: