有没有一种方法可以只使用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);

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

jquery append((

获取最后一个<li>的id

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

获得最后一个id后，将其传递到ajax调用中。

Answer 2

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

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

现在有三种选择。任一

1. 您将当前活动li容器的id提供给rooms.php并且该脚本为受影响的容器设置活动类。

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的间隔。如果请求持续时间超过1000ms，可能会出现问题。这可能在您的测试中仍然有效，但如果您的应用程序中有100或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);

})；

这应该可以解决你的问题，如果你还面临任何问题，请告诉我。