处理从AJAX调用返回的数据

Question

我有以下脚本来加载从node.js服务器生成的HTML页面：

    (function nodeLoader(){
        $.ajax({
            url: "http://oclock.dyndns.org:8000",
            method: "get",
            data: {hk: hk },
            success: function(data){
                var visibile = $("div.scheda:visible").attr("id");
                $('.scheda').hide('fast',function(){$('#99').html(data).show();});
                setTimeout( function(){
                    //devo prendere id del messaggio visualizzato e settarlo a letto
                    $('.scheda').hide('fast',function(){$('#'+visibile).show().html(data);});
                },30000 );
            }
        });
    })();

加载的页面如下：

<div id="container"></div>

<script>
// create a new websocket
var socket = io.connect('http://oclock.dyndns.org:8000');
// on message received we print all the data inside the #container div
socket.on('notification', function (data) {
    var msgs = '';
    $.each(data.flashmsgs,function(index,flashmsg){
        msgs += "<div>"
        msgs += "<h3>Messaggio inviato da " + flashmsg.created_by + "</h3><br>";
        msgs += "<p>" + flashmsg.testo + "</p></div>";
    });
    $('#container').html(msgs);
});
</script>

我想要得到的是在if函数（成功函数中）中添加一个if语句：如果#container包含数据（node.js服务器正在获取内容），则进行隐藏和显示。 我怎样才能做到这一点？ 如何向下钻取数据变量？ 我唯一的想法是将node.js服务器更改为提供json数组而不是页面，但我现在不希望重写服务器。

Answer 1

我遇到了类似的问题，找到一种灵活的方式将一些元数据与HTML一起传递真的很痛苦。 当然，最好的方法是使用JSON ，但是如果您无法进行此类更改，那么在不重写大量代码的情况下，仍然有很少的解决方案来实现此目的。

第一个是在注释节点中包含一些元数据，例如：

<!--META:{"count":3}-->
<ul>
    <li>Message 1</li>
    <li>Message 2</li>
    <li>Message 3</li>
</ul>

第二个方法是在声明一些回调的同时传递带有一些代码的<script>标记，例如，在将HTML插入文档之前，先执行dataLoaded 。 请记住，此方法可能不安全：

<ul>
    <li>Message 1</li>
    <li>Message 2</li>
    <li>Message 3</li>
</ul>
<script type="text/javascript">dataLoaded({"count":3})</script>

第三个是手动操作数据，但是让JavaScript代码非常依赖HTML DOM结构不是一个很好的做法。

$.ajax({
    ...
    success: function(data) {
        var count = $(data).find('li').length; // count == 3
    }
});

最后，类似于第一种方法，您可以只使用一些隐藏节点：

<input type="hidden" name="count" value="3" />
<ul>
    <li>Message 1</li>
    <li>Message 2</li>
    <li>Message 3</li>
</ul>

...甚至使用data-*属性：

<ul class="messages" data-count="3"> <!-- NOTE: Don't forget to cast attribute value to Integer in JavaScript -->
    <li>Message 1</li>
    <li>Message 2</li>
    <li>Message 3</li>
</ul>

我希望这有帮助。