手柄数据从一个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。在将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代码依赖于HTMLDOM结构非常多。

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

我希望这有助于。