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

私はこのようにしました。

関数でラップされた 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 に答える
0

リモートサーバーにもアクセスできるため、ご指摘のとおり、JSONP 呼び出しを行うことができます。生データを に格納するのではなくkw.json、関数呼び出しでデータをラップできます。

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

そうすれば、リソースがロードされたときに –</p> 

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

jsonpCallback–サイトで指定された関数を呼び出し、データを渡します。したがって、データを処理する関数を作成し、リソースをロードするだけです。リソースをロードするために、$.ajax(したがってgetJSON) には JSONP サポートが組み込まれています。

kw.js厳密に言えば、ファイルは JavaScript オブジェクトを構築して関数に渡すスクリプトであり、プレーンな JSON データ ファイルではなくなっているため、それがオプションである場合はそれを呼び出す方が適切かもしれません。もちろん、ファイル名は任意で、MIME タイプだけが重要です。

于 2013-02-25T15:52:50.590 に答える