有沒有辦法只使用 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 調用中傳遞它。