如何仅刷新用户单击的div

Question

我想刷新用户单击的div，其中div‘id基于从数据库获取的数据id。

让我们说，，如果用户用id #Top-4单击div，那么只有在成功执行操作之后才应该刷新div。但我的问题是，我不知道如何处理div的动态生成is。

我相信问题在我的ajax代码中。

$('#topic-4').load(location.href + ' #topic-4');

需要记住的一点是，is 主题-4.是动态从数据库中获取的。我还希望将ajax代码保留在重复区域之外。

我的ajax代码

$(function() {

$(document).on("click", ".first", function(e) {

    e.preventDefault();

    var uid = $(this).data('id');

    $.get('vote.php?id=' + uid, function(html){

        $('#topic-4').load(location.href + ' #topic-4');

         });

});

});

这些主题从数据库中获取，并在do while php中重复，如图所示：

<?php do { ?>

<div class="first" id="topic-<?php  $row_topics['id']; ?>">

 <a href="#" data-id="<?php echo $row_topics['id']; ?>" class="btn"> click </a>

</div>

<?php } while ($row_topics = mysqli_fetch_assoc($query_topics));   ?>

结果

<div class="first" id="topic-1">
 <a href="#" data-id="1" class="btn"> click </a>  
</div>

<div class="first" id="topic-2">
 <a href="#" data-id="2" class="btn"> click </a>  
</div>

<div class="first" id="topic-3">
 <a href="#" data-id="3" class="btn"> click </a>  
</div>

...and soon

有什么帮助吗？

Answer 1

试试这个：

$.get('vote.php?id=' + uid, function(html) {
    $.get(location.href + '?' + (new Date()).getTime(), function(response) {
        var newTopic = $(response).find('#topic-' + uid);
        $('#topic-' + uid).html(newTopic.html());
    });
});

location.href + '?' + (new Date()).getTime()使它可以在没有任何缓存的情况下重新加载页面。

您可以通过jQuery构建一个新的$(response)对象，并在它想要的主题中进行搜索。

之后，您将为当前主题分配新的值。

它应该在不改变php代码的情况下工作。

为了使其更简单，您必须更改您的vote.php，这样它将只返回一个新的更新的主题html，而不是您所能做到的：

$.get('vote.php?id=' + uid, function(response) {
    $('#topic-' + uid).html(response);
});

Answer 2

您的问题是，您再次获得了所有的DIVS，正如您在PHP (不完整)代码中所展示的那样。

编写处理该GET的所有PHP代码，这样我们就可以给您更多的帮助。主要问题在于您的SQL语法，因为您可以在那里进行筛选。