Jquery 从JSON构建菜单

我试图通过jQuery调用JSON请求来构建一些动态菜单，这些菜单是动态创建的。我有以下计划的菜单结构：

<ul class="menu">
    <li>
        <a href="/Organisations/201/NewJournalEntry" title="New Journal Entry">
            <span class="icon journal-new">New Journal Entry</span>
        </a>
    </li>
    <li>
        <a href="/Organisations/201/People" title="View People">
            <span class="icon people">People</span>
        </a>
    </li>
    <li class="sep">
        <a href="/Organisations/201/Edit" title="Edit">
            <span class="icon edit">Edit</span>
        </a>
    </li>
</ul>

最好的方法是什么？将被查询的url类似于“/MenuBuilder/organization-201.json”`

我已经查看了$.getJSON方法，但是查看的是正确的吗？有人能提供建议等，或者更好的例子吗。。谢谢

这就是我到目前为止所尝试的

$(document).ready(function() {

                // First we connect to the JSON file
                $.getJSON('menu.json', function(data)
                {
                    // Setup the items array
                    var items = [];
                    // For each line of data
                    $.each(data, function(key, val)
                    {
                        items.push('<li class="' + liClass + '"><a href="' + href + '"><span class="' + icon +'">' + text + '</span></a></li>');
                    });

                    $('<ul/>', {
                        html: items.join('')
                    }).appendTo('#buildHere');

                });

                // END json

            });

$（文档）.ready（函数（）{
//首先，我们连接到JSON文件
$.getJSON（'menu.json'，函数（数据）
{
//设置项目数组
var项目=[]；
//对于每行数据
$。每个（数据、函数（键、值）
{
items.push（“
”）；
});
$（“
”{
html:items.join（“”）
}).appendTo（“#buildHere”）；
});
//结束json
});

是的，您完全可以使用JQuery中的$.getJSON方法或longhand$.ajax方法

你应该考虑使用某种模板机制来从JavaScript中生成菜单。您可以使用JSRender或其他JQuery模板引擎

---

我个人更喜欢KnockoutJS，它有一个内置的模板引擎。但它提供的不仅仅是javascript模板

$。getJSON

确实是一条路要走。

success

回调会将数据作为JavaScript对象提供给您，因此您可以编写代码将其转换为DOM元素，而无需担心转换：

$.getJSON('/MenuBuilder/organisation-201.json',{},function(data) {
    var ul = $("<ul/>")
        .attr("id",data.menu.id)
        .addClass(data.menu.class);
    $.each(data.menu.content.menuitem, function() {
        var li = $("<li/>")
            .appendTo(ul)
            .addClass(this.liClass);
        var a = $("<a/>")
            .appendTo(li)
            ...
    });
});

---

你有什么问题？从服务器检索json或从中创建DOM元素（或两者兼而有之）？从下面的JSONM答案构建菜单提供了一个介绍，您可以轻松地完成它以满足您的需要。但从长远来看，我认为学习Rody van Sambeek建议的模板插件可能会更好，但由于我没有这方面的个人经验，我不能确定。嗯，这可能是一个不受欢迎的问题。但是你确定要动态构建菜单吗？这样做既酷又性感，但如果你不需要它，在增加复杂性之前我会三思而后行…@scraimer原因是这样我可以让菜单出现在DOM的底部，并相应地定位，同时确保只加载所需的HTML，否则对于屏幕上的每条记录，我将有一个可能不需要的菜单。

$.getJSON('/MenuBuilder/organisation-201.json',{},function(data) {
    var ul = $("<ul/>")
        .attr("id",data.menu.id)
        .addClass(data.menu.class);
    $.each(data.menu.content.menuitem, function() {
        var li = $("<li/>")
            .appendTo(ul)
            .addClass(this.liClass);
        var a = $("<a/>")
            .appendTo(li)
            ...
    });
});

var html = ['<ul id="', data.menu.id, '" class="', data.menu.class, '">'];
// Keep adding elements to html as strings
// ...
html.push('</ul>');
var ul = $(html.join(''));