手柄數據從一個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> 

我希望這有助於。