0

我在一个名为 kw.json 的外部文件中有这个 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英语，我来自德国）

谢谢！

4

2 回答 2

0

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

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

这样，当资源被加载时——</p> 

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

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

严格来说，您的文件是构造 javascript 对象并将其传递给函数的脚本，而不再是纯 JSON 数据文件，因此如果可以选择调用它可能会更整洁kw.js。当然，文件名可以是任意的，mime 类型才是最重要的。

于 2013-02-25T15:52:50.590 回答
0

我是这样做的。

封装在函数中的 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();
});
}

这工作得很好，没有错误。

谢谢你的提示！

于 2013-02-26T07:52:11.280 回答