有没有办法只使用 ajax 用新内容更新 div

Question

这是我正在更新的 div

但我想在每次 div 刷新活动 class 时将活动 class 添加到 (li) 项目中，所以我不想刷新 (ul) 中的所有数据，但如果有数据库中的新数据，不刷新之前的 (li) 项

<div id="contacts">
    <ul id="rooms" class="rooms">
        <!-- This is where the data get inserted -->

        <!-- the ajax call and this  -->

        <li class='contact' data-val='<?php echo $room['id']; ?>'>
            <div class='wrap'>
                <div class='meta'>  
                    <p class='name'><?php echo $room['sender']; ?></p>
                    <p class='preview'><?php echo $room['senderemail']; ?></p>
                </div>
            </div>
        </li>


    </ul>
</div>

这是我的 ajax 电话

$(document).ready(function() {
    var interval = setInterval(function(){
        $.ajax({
            url: 'rooms.php',
            success: function(data){
                $('#rooms').html(data);
            }
        });
    }, 1000);
});

在房间里 php

    $rooms = get_rooms();
    foreach($rooms as $room){
        ?>
        <li class='contact' data-val='<?php echo $room['id']; ?>'>
            <div class='wrap'>
                <div class='meta'>  
                    <p class='name'><?php echo $room['sender']; ?></p>
                    <p class='preview'><?php echo $room['senderemail']; ?></p>
                </div>
            </div>
        </li>
        <?php
    }

get_rooms() function

function get_rooms() {
        $sql = "SELECT id, sender, senderemail FROM chatroom ";
        $result = mysqli_query($GLOBALS['dbh'], $sql);
        $rooms = array();   
        while($room = mysqli_fetch_assoc($result)){
            $rooms[] = array('id'=>$room['id'], 'sender'=>$room['sender'], 
                              'senderemail'=>$room['senderemail']);
        }
        return $rooms;
}

Answer 1

您需要简单地更新您的 JS 代码，例如：

$(document).ready(function() {
var active_list = '';
var interval = setInterval(function(){
    $.ajax({
        url: 'rooms.php',
        beforeSend: function(){
            active_list = $('#rooms').find('li.contact.active').attr('data-val');
        }
        success: function(data){
            $('#rooms').html(data);
            $(data).find('li[data-val="' + active_list +'"]').addClass('active');
        }
    });
}, 1000);

});

这应该可以解决您的问题，如果您仍然遇到任何问题，请告诉我。

Answer 2

如果我对您的理解正确，您的问题是当有新数据时您丢失了活动的 class （您单击了 li 容器）。

这与您交换所有内容的事实有关。

现在有三个选项。 任何一个

1. 你给 rooms.php 当前活动的 li-container 的 id，这个脚本为受影响的容器设置活动的 class。

2. 您将所有已显示的聊天室（ID）转移到 rooms.php 并仅加载新的聊天室（这意味着稍后需要进行排序）。

3. 您保存活动 li class 并在内容更改后重新设置（这是最快的）

fe：在您的 Ajax 成功功能中：

let id=0;
let active_li = $('li.active');
if (active_li.length>0) id=active_li.data('val');
$('#rooms').html(data);
if (id!=0) $('li[data-val="'+id+'"]').addClass ('active');

其他一些想法：

注意1000ms的间隔。 如果请求持续时间超过 1000 毫秒，则可能会出现问题。 这在您的测试中可能仍然有效，但如果您的应用程序中有一百或 1000 个用户，则可能不再适用。

当您单击活动房间并将其保存在 session 中以便服务器知道客户端中哪个房间处于活动状态时告诉服务器是否有意义？

Answer 3

您只需要将新数据推送到 div 如下所示，只需将您的行替换为：

$('#rooms').append(data);

这将在最后一个 <li> 之后的现有<div>中添加新的<li> <li>

jquery append()

获取最后一个<li>的 id

var lastId = $( "#rooms li" ).last().attr('id');

一旦你得到最后一个 id，然后在你的 ajax 调用中传递它。