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处理过的先前数据与新数据一起追加。

编辑：示例附加结果：

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

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

结果应该是：

string 1
string 2

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

string 1
string 2 （来自其他所选广播的新数据）
string 2 （新数据重复）

如果添加选择另一个收音机，它将变为如下：

string 1
string 2
string 2
string 3 （新数据）
string 3 （新数据重复）
string 3 （新数据重复）
string 3 （新数据重复）

我的ajax盒子结果：

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

Answer 1

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

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

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

$('.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.
        }
    });
});

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

3 个答案: