вызов JSON с помощью JQuery из внешнего файла не работает

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, если это вариант. Конечно, имена файлов могут быть произвольными, и все это имеет значение.

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(); 
}); 
} 

Это работает очень хорошо без ошибок.

Благодарим за подсказки!