在追加新数据之前清除以前的 ajax 响应数据

Question

我正在尝试 .append() 从单选按钮中选择一个数据，但它会显示所有以前的响应结果。

我的 HTML：

$sql = "SELECT DISTINCT(name) FROM table1";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    $i = 1;
    while($row = $result->fetch_assoc()) {
        echo '<label>'.$row['name'].'</label>';
        $sql2 = "SELECT * FROM table1 WHERE list = '".$row['list']."'";
        $result2 = $conn->query($sql2);
        if ($result2->num_rows > 0) {
            while($row2 = $result2->fetch_assoc()) {
                echo '<input name="group['.$i.']" class="id" type="radio" data-id="'.$row2['id'].'" />'.$row2['list'];
            }
        }
        $sql2 = NULL;
        $i++;
    }
}
$sql = NULL;

我的 ajax 获取数据并追加：

$('.id').on('click', function(){
    var id = $(this).data('id');
    $.ajax ({
        type: 'POST',
        url: 'url-here',
        data: { id : id },
        success : function(data) {
            $('#list').append(data);
        }
    });
});

对于PHP端如果有$_POST['id']则做mysql查询从表中过滤并返回结果。

if(isset($_POST['id'])){
    $sql = "SELECT * FROM table1 WHERE id = '".$_POST['id']."'";
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            echo '<label>'.$row['name'].'</label>';
        }
    }
}

所以在我的 ajax 结果框 中发生了什么，它不断将 ajax 处理的先前数据与新数据一起附加。

EDIT：附加结果示例：

选中单选按钮的第一个结果：string 1

选中单选按钮的第二个结果：string 2

所以结果应该是：

1. string 1
2. string 2

抱歉，我的解释有误。我的 ajax 框结果是这样的：

1. string 1
2. string 2 （来自另一个选定电台的新数据）
3. string 2 （新数据重复）

如果添加选择另一个收音机，它将变成这样：

1. string 1
2. string 2
3. string 2
4. string 3 （新数据）
5. string 3（新数据复制）
6. string 3（新数据复制）
7. string 3（新数据复制）

我的 ajax 框结果：

<div id="list"></div>

Answer 1

您应该从元素中删除 previously 附加的事件处理程序以避免多次点击。

$('.id').on('click', function(){
    var id = $(this).data('id');
    $.ajax ({
        type: 'POST',
        url: 'url-here',
        data: { id : id },
        success : function(data) {
            $('#list').append(data);
            $('.id').off('click'); // remove a previously-attached event handler from the element.
        }
    });
});

Answer 2

在标签中添加任意类并输入

  echo '<label class="ajax">'....
  ....
  echo '<input  class="ajax" ...
  ....

并在每个选择中删除或在 ajax 中更改

  $('.ajax').remove();
  $('#list').append(data);

或者更好

  $('#list .ajax').remove();
  $('#list').append(data);

更新

或者简单地将 div 添加到您的 ajax 响应中

$('#list').append("<div class='ajax'>"+data+"</div>");

然后使用这段代码

 $('#list .ajax').remove();
 $('#list').append(data);

Answer 3

我认为你的 jQuery 看起来不错。作为结果，您的 SQL 查询可能会有多行。这可能意味着您的 id 值实际上返回了两行。它们包括第一行和第二行。