如何從json數據動態構建無序列表

Question

如何修改此動態構建下拉列表的函數，以便可以從json數據動態構建無序列表。

</script> 
    <script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     jQuery .getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) { 
      $.each(jsonData, function (i, j) { 
       document.index.spec_list.options[i] = new Option(j.options); 
     }); 
    });}); 
</script> 

* spec_list *是下拉即ID「選擇」這裏& 選項即（j.options）是數據被接收作爲JSON在表中的字段。我只有'msg'現在只有表格字段哪個數據將被用來動態填充'ul id =「msg」'。

Answer 1

所以，它聽起來就像你想li元素追加到id爲「味精」，其中每個li的內容來自於每個條目的.msg財產在jsonData現有ul：

jQuery.getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) { 
    var markup; 

    markup = []; 
    jQuery.each(jsonData, function (i, j) { 
     // Note: Be sure you escape `msg` if you need to; if it's already 
     // formatted as HTML, you're fine without as below 
     markup.push("<li>"); 
     markup.push(j.msg); 
     markup.push("</li>"); 
    }); 

    jQuery('#msg').append(markup.join("")); 
}); 

Here's a working example。 （參見「題外話」的評論如下。工作示例使用中提到的招數之一）

或者，如果新li S的關係在ul取代已有的，使用

jQuery('#msg').html(markup.join("")); 

...而不是append。不管是哪種方式，它都使用着名的「將它構建在一個數組中，然後使用join它」的建立標記的習慣用法，它比字符串連接幾乎總是更高效（在JavaScript實現中）。 （首先建立標記，然後通過單個DOM操作調用[在這種情況下通過jQuery]將其應用於，確實比單獨添加每個li效率更高。

如果您不關心效率（畢竟這顯示了Ajax調用的結果，並且如果您知道只有幾個li可以附加...），您可以像這樣做這樣的：

jQuery.getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) { 
    var ul; 

    ul = jQuery('#msg'); 
    // If you want to clear it first: ul.empty(); 
    jQuery.each(jsonData, function (i, j) { 
     // Note: Be sure you escape `msg` if you need to; if it's already 
     // formatted as HTML, you're fine without as below 
     ul.append("<li>" + j.msg + "</li>"); 
    }); 
}); 

...但如果你正在處理大量的項目，或者如果你是在一些經常發生這樣做，你可能用更好的構建，其後續版本。

偏題：您的原始代碼使用jQuery符號和$符號進行混合。可能最好堅持一個或另一個，所以我去了jQuery以上。如果您沒有使用noConflict，或者如果您正在使用noConflict但仍然可以使用$的巧妙技巧之一，則可以安全地將上述內容更改爲始終使用$。