Ajax刷新后实现Div间数据迁移的问题求助

看起来你遇到的核心问题是：每次Ajax拉取新数据后，没有先保存第一个容器的旧数据再迁移到第二个容器，反而直接把新数据同时赋值给了两个容器，导致它们内容一致。另外你的代码里还有几个小bug需要修正，我一步步帮你解决：

问题点拆解 #

1. 数组判断错误：Array.isArray(["q_play_list"])这里写错了，应该是判断data["q_play_list"]是否为数组，而不是判断一个包含字符串的数组。
2. 旧数据未提前保存：你现在的逻辑是拿到新数据后，直接把新值同时赋给#kue1和#kue2，完全没处理旧数据的迁移。
3. 循环逻辑冗余：循环里每次迭代都会覆盖#kue1和#kue2的内容，最后只会留下循环最后一条数据的值，不符合你“保留旧数据”的需求。

修正后的代码实现 #

我调整了你的Ajax逻辑，先保存旧数据，再迁移，最后更新新数据，同时修复了bug：

$(document).ready(function(){
    setInterval(function(){
        $.ajax({
            type: "GET",
            url: "/ajax",
            data: { QNum: 0 , station_num: 0 },
            success: function(data){
                // 先保存#kue1和#station1的旧数据
                const oldKue1Text = $('#kue1').text();
                const oldStation1Text = $('#station1').text();

                if(data["q_play_list"] && Array.isArray(data["q_play_list"])){
                    const playList = data["q_play_list"];
                    // 假设playList里最后一条是最新数据（如果不是，你可以根据实际情况调整取哪一条）
                    const latestData = playList[playList.length - 1];
                    const newQNum = latestData.QNum || "";
                    const newStationNum = latestData.station_num || "";

                    // 只有当新数据有效时，才执行迁移和更新
                    if(newQNum && newStationNum){
                        // 把旧数据迁移到#kue2和#station2
                        $('#kue2').text(oldKue1Text);
                        $('#station2').text(oldStation1Text);
                        // 把新数据更新到#kue1和#station1
                        $('#kue1').text(newQNum);
                        $('#station1').text(newStationNum);
                    }
                }
                console.log(data);
            },
            error: function (error) {
                console.log("something is wrong: ", error);
            }
        });
    },10000)
});

关键调整说明 #

• 提前保存旧数据：在处理新数据之前，先把#kue1和#station1的现有内容存到变量里，这样后续迁移不会被新数据覆盖。
• 修复数组判断：把Array.isArray(["q_play_list"])改成Array.isArray(data["q_play_list"])，正确判断返回的播放列表是否为数组。
• 简化循环逻辑：假设播放列表的最后一条是最新数据（如果你的业务逻辑是第一条为最新，改成playList[0]即可），避免循环多次覆盖DOM内容。
• 添加有效性判断：只有当新的取号和工位号都有效时，才执行迁移和更新，避免空值覆盖现有内容。

如果你的播放列表有多组数据需要对应到kue3/kue4等容器，可以扩展这个逻辑，比如保存kue2的旧数据到kue3，以此类推，核心思路都是先保存旧值，再迁移，最后更新新值。

内容的提问来源于stack exchange，提问作者Max13