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>

我想要的是向nodeLoader添加一个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>标记时使用一些代码，同时声明一些回调，e。 G。在将dataLoaded插入文档之前HTML。请注意，此方法可能不安全：

<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>

我希望这会有所帮助。

处理从AJAX调用返回的数据

1 个答案: