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

您只需像下面那样更新您的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

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

这与您交换所有内容有关。

现在有三个选项。要么

您给rooms.php当前活动的li容器的ID 并且此脚本为受影响的容器设置了活动类。
您将已经显示的所有聊天室（标识）转移到rooms.php中，并且仅加载新的（这意味着以后需要进行排序）。
保存活动的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

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

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

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

jquery append()

获取最后一个<li>

的ID

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

一旦获得了最后一个ID，就将其传递给ajax调用。

有没有一种方法可以仅使用ajax用新内容更新div

3 个答案: