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

Question

这是我正在更新的 div

但我想向 (li) 项目添加一个活动类 每次 div 刷新时，活动类都会消失 所以我不想刷新（ul）中的所有数据，但是 仅当数据库中有新数据时才添加 (li)， 无需刷新之前的 (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 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

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

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

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

jquery append()

获取最后一个<li>的id

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

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

Answer 2

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

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

现在有三个选项。要么

1. 您为 rooms.php 提供当前活动的 li-container 的 id 此脚本为受影响的容器设置活动类。

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

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

f.e：在您的 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 个用户，则可能不再适用。

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

Answer 3

您需要简单地更新您的 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);

});

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