javascript - 长轮询以更新 DOM，同时保留来自 jQuery 的累积属性

Question

编辑:一切正常；插入工作。唯一的问题是每次推送时，#load_info div 都会重置为空。我怎样才能保留 div 中的原始内容，尽管在重新推送 XML 文件时内容将是其自身的更新版本。

我有一个 PHP 脚本，用于对 XML 文件进行长轮询并将其编码为 JSON 数组。它以 JSON 作为参数从前端调用。

    $filename= dirname(__FILE__)."/people.xml";

    $lastmodif = isset( $_GET['timestamp'])? $_GET['timestamp']: 0 ;
    $currentmodif=filemtime($filename);

    while ($currentmodif <= $lastmodif) {
        usleep(10000);
        clearstatcache();
        $currentmodif =filemtime($filename);
    }

    $response = array();
    $xObj = simplexml_load_file($filename);

    // Loop for #loadMe.
    foreach($xObj as $person){
        $concat_buttons .= "<button class='mybutton' value='" . (string)$person->id . " '> " . (string)$person->fullName . "</button>";
    }

    // Loop for #toadMe.
    foreach($xObj as $person){
        $concat_info .= "<div class='div div_' data-person-id='" . (string)$person->id . "' id='" . (string)$person->id . "'><h1> " . (string)$person->job . "</h1></div>";
    }


    // Output for AJAX.
    $response['msg']                = $concat_buttons;
    $response['msg2']                = $concat_info;
    $response['timestamp']      = $currentmodif;
    echo json_encode($response);

然后我有一个 jQuery 脚本来实例化 JSON 对象 (msg2)，以便将每个节点附加到一个名为 #load_data 的 div 中。我的问题是为什么下面的 jQuery 不起作用？我的猜测是 $(window).find 在 get_person(id) 函数中不起作用和/或我的函数超出了轮询范围。请注意，在我开始尝试合并 show_person() 和 get_person() 函数之前，PHP 和 JS 已 100% 正常工作。工作原理是，当 #load_button div 中的某个按钮被点击时，它会切换一条信息的 View ，其中的 id 与带有 .show() 的按钮的 value 属性，最初是隐藏的；然后，如果单击另一个按钮，旧信息将被 .hide() 隐藏，并且可以看到新数据。这是我使用长轮询更新 DOM 元素的迂回解决方案，方法是在开始时将它们全部加载，但是如果在发生新轮询时显示一条信息 (var timestamp 得到更新)，那么 #load_info 中的元素将暂时从 DOM 中丢失，因此导致一个空的 #load_info div 直到单击下一个按钮。因此，我试图添加一些额外的功能来将 DOM 数据存储在 var $person 中，以便在轮询之后，之前显示的任何内容都会重新出现。可以更改或添加什么以使此 jQuery 脚本按预期工作？提前致谢!

    var timestamp=null;
    function waitForMsg() {
        $.ajax({
            type: "GET",
            url: "getData.php?timestamp="+timestamp,
            async: true,
            cache: false,        
            success: function(data) {
                var json=eval('('+data+ ')');
                if (json['msg'] != "") {
                    $("#load_buttons").empty();
                    $("#load_buttons").append(json['msg']);

                    // Update any person divs that were already visible.
                    $('#load_info .person').each(function() {
                        // Grabs the ID from data-person-id set earlier.
                        var id = $(this).data('person-id');
                        show_person(id);
                    });

                }
                timestamp = json["timestamp"];
                setTimeout("waitForMsg()",1000);
            },
            error: function(XMLHttpRequest,textStatus,errorThrown) {
                setTimeout("waitForMsg()",15000);
            }                   
        });
    }

    $(document).on('click', '.mybutton', function() {
        $('#load_info').empty();
        show_person(this.value);
    });

    function show_person(id) {
        $('#person-detail-' + id).remove();
        get_person(id).appendTo('#load_info');
    }

    function get_person(id) {
        var $person = $(window).find('id:contains(id)');

        var $div = $('<div>', {
            'class': 'person',
            'data-person-id': id,
            id: id
        });

        $person.find(h1).text.appendTo($div);
        return $div;  
    }

Answer 1

看起来您在 PHP 脚本中生成 JSON 时遇到了问题:

$response['msg']  = $concat;
$response['msg2'] = $concat2;

$concat 和 $concat2 没有在任何地方定义，你是想使用 $concat_buttons 和 $concat_info 代替？

$response['msg']  = $concat_buttons;
$response['msg2'] = $concat_info;

在您的 jQuery 中，您引用了 #load_info .person，但它看起来不像 PHP 构建的 div 属于 person 类，这可能就是为什么您的循环是'找到他们。