javascript - 处理从 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>

我想要得到的是向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> 标记和一些代码，例如。 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>

我希望这会有所帮助。