Question

我将这个json数据放在一个名为kw.json的外部文件中：

{
"categories" : [{
"producer" : "Apple",
        "items" : [
        {"name": "iPhone 4G"},
        {"name": "iPhone 4GS"},
        {"name": "iPhone 5"}
    ]
},{
"producer" : "Samsung",
        "items" : [
        {"name": "Galaxy S3"},
        {"name": "Galaxy S2"}
    ]
 },{
"producer" : "Nokia",
    "items" : [
        {"name": "Lumia"},
        {"name": "3210"},
        {"name": "3310"}
    ]
}]

}

我有这个脚本加载文件并处理数据：

 var menulist;
 $.getJSON(rootDomain + "kunden/*kwmobile*/js/kw.json", function(json) {
menulist = json;

var i,c = '<div class="fn_menu_title pointer"><span>bitte Hersteller auswählen</span></div><ul class="fn_menu">', opt = $('<li/>');

var menu = menulist.categories;

for (i=0; i < menu.length; i++){
    c += '<li><span class="noar" id="'+[i]+'">' + menu[i].producer + '</span></li>';
}

$('#cat').html(c+'</ul>');
$(".noar").live('click',function(){
    var indx = $(this).attr("id");
    if (indx < 0) {
        $('#items').css('display','none');
        return;
    }
    var item = '<div class="fn_menu_title pointer"><span>bitte Modell auswählen</span></div><ul class="fn_menu">';
    for (i=0; i < menu[indx].items.length; i++){
        item += '<li><span class="pointer search_link" searchkey="'+ menu[indx].producer +' '+ menu[indx].items[i].name +'">' + menu[indx].items[i].name + '</span></li>';
    }

    $('#items').html(item+'</ul>').fadeIn();
    $("#items").menuFlip();
});
 });

问题是，控制台显示的是跨浏览器错误，但我无法在相同的来源上传.json。

我知道jsonp可以解决问题，但我从未使用过，所以我希望你能帮助我。

（抱歉bda英语，我来自德国）

谢谢！

Answer 1

由于您也可以访问远程服务器，因此您可以进行JSONP调用，如您所示。您可以使用函数调用来包装数据，而不是将原始数据存储在kw.json中：

jsonpCallback({ "categories": ... });

这样，当加载资源时 -

<script type="text/javascript" src="remote-location/kw.json"></script>

- 它会在您的网站上调用名为jsonpCallback的函数，并传递数据。因此，您所要做的就是创建一个处理数据和加载资源的函数。为了加载资源，$.ajax（以及getJSON）内置了JSONP支持。

严格地说，你的文件是一个脚本，它构造一个javascript对象并将它传递给一个函数，而不再是一个普通的JSON数据文件，所以如果这是一个选项，它可能更适合称之为kw.js。当然文件名可以是任意的，而mime类型就是最重要的。

Answer 2

我是这样做的。

包含在函数中的json文件：

jsonp123({
"categories" : [{
"producer" : "Apple",
        "items" : [
        {"name": "iPhone 4G"},
        {"name": "iPhone 4GS"},
        {"name": "iPhone 5"}
    ]
},{
"producer" : "Samsung",
        "items" : [
        {"name": "Galaxy S3"},
        {"name": "Galaxy S2"}
    ]
 },{
"producer" : "Nokia",
    "items" : [
        {"name": "Lumia"},
        {"name": "3210"},
        {"name": "3310"}
    ]
}]
});

在我的js文件中，我调用jsonp123来获取所有内容：

$.ajax({
url: rootDomain + "kunden/*kwmobile*/js/kw.json?callback=json123",
dataType: 'jsonp',
jsonpCallback: "jsonp123",
error: function(xhr, status, error) {
    alert(error);
},
success: function(categories) { 
    jsonp123(categories);
}
});

function jsonp123(response){

var i,c = '<div class="fn_menu_title pointer"><span>bitte Hersteller auswählen</span></div><ul class="fn_menu">', opt = $('<li/>');

var menu = response.categories;

for (i=0; i < menu.length; i++){
    c += '<li><span class="noar" id="'+[i]+'">' + menu[i].producer + '</span></li>';
}

$('#cat').html(c+'</ul>');
$(".noar").live('click',function(){
    var indx = $(this).attr("id");
    if (indx < 0) {
        $('#items').css('display','none');
        return;
    }
    var item = '<div class="fn_menu_title pointer"><span>bitte Modell auswählen</span></div><ul class="fn_menu">';
    for (i=0; i < menu[indx].items.length; i++){
        item += '<li><span class="pointer search_link" searchkey="'+ menu[indx].items[i].name +'">' + menu[indx].items[i].name + '</span></li>';
    }

    $('#items').html(item+'</ul>').fadeIn();
    $("#items").menuFlip();
});
}

这很好用，没有错误。

谢谢您的提示！

通过jquery从外部文件调用json无效

2 个答案: