Question

我在使用UL LI List和JQuery with JSON创建菜单时遇到问题。这是我的JFiddle：

    $.getJSON('http://www.speedyshare.com/zr6HF/download/doc22.json', function (data) {

    //$("body div#content").html(makeUL(data.menu[0]));
    $("body .menu ").html(makeUL(data.menu));

});
//$("body div#content").html("</li></ul>");

function makeUL(lst) {
    var html = [];
    //html.push("<div class=sub"+count+">");
    html.push("<ul>");
    count++;
    $(lst).each(function () {
        html.push(makeLI(this));
    });
    html.push("</ul>");
    //html.push("</div>");
    return html.join("\n");

}

function makeLI(elem) {
    var html = [];

    html.push("<li >");

    //html.push(elem.name);
    if (elem.link)
    //html.push("<div class=item"+count2+">");
    html.push("<a>" + elem.link + "</a>");
    //html.push("</div>");
    count2++;

    if (elem.sub) html.push(makeUL(elem.sub));
    html.push("</li>");
        //
        return html.join("\n");

}

$ .getJSON目前是直接链接到JSON文件，但他不在JSFiddle中工作（我不知道为什么），在硬盘上使用外部文件，效果很好。

好的，我想做类似的菜单，例如在这个JSFiddle：

http://jsfiddle.net/65R8q/31/，但是来自我的JSON文件的数据。我在很多方面尝试过div，但仍然无法正常工作。： - /

有人知道我哪里弄错了吗？

Answer 1

正如adeneo评论的那样，这是由于同源政策。在制作Ajax代码时需要使用JSONP。将callback=?参数添加到调用网址：

$.getJSON('http://www.speedyshare.com/zr6HF/download/doc22.json?callback=?', function (data) {

    //$("body div#content").html(makeUL(data.menu[0]));
    $("body .menu ").html(makeUL(data.menu));

});

http://jsfiddle.net/TqcEs/1/

但您请求的页面是HTML，而不是JSON数据，因此会抛出语法/ JavaScript错误。

使用JQuery和JSON外部文件从UL List创建菜单

1 个答案: