Не удалось загрузить файл с помощью JQuery

Question

Вот фрагмент кода, я играю с:

$.get('http://www51.zippyshare.com/d/70229620/44835/data.json', function (data) { 
console.log(data); 
}).fail(function() { 
console.log('I failed to download json') 
}); 

К сожалению, каждый раз, когда он не может загрузить этот файл и записывает сообщение.

Почему это не загружает этот файл?

Answer 1

Это связано с междоменными запросами. В некоторых браузерах безопасность устанавливается на уровень, на котором JSON (или другие файлы) не могут быть получены с помощью javascript, если целевой файл находится в другом домене в качестве домена, в котором вы сейчас находитесь. В хроме я получаю следующее сообщение об ошибке:

XMLHttpRequest cannot load http://www51.zippyshare.com/d/70229620/44835/data.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xxx.xxx.xxx.xxx' is therefore not allowed access. 

Способ обойти это с помощью JSONP, который разработан, чтобы избежать этой проблемы. Тем не менее, вам нужен контроль над выходом запрошенного файла. Таким образом, в вашем случае (получение json-файла из zippyshare) это может стать очень сложным, если этот файл является динамическим.

Вот небольшой пример JSONP:

$.ajax({ 
    type: 'GET', 
    url: "http://www51.zippyshare.com/d/70229620/44835/data.json", 
    async: false, 
    jsonpCallback: 'jsonCallback', 
    contentType: "application/json", 
    dataType: 'jsonp', 
    success: function(json) { 
     console.log(json.data); 
    }, 
    error: function(e) { 
     console.log(e.message); 
    } 
}); 

Важно, чтобы ваше содержание data.json теперь обернут в вызов функции, например:

jsonCallback(
    { 
    "data": "value" 
    } 
); 

Больше информации и объяснение может быть найдено здесь: http://www.jquery4u.com/json/jsonp-examples/