Загрузка локального файла JSON - PullRequest
Новая
       72

Загрузка локального файла JSON

281 голосов
/ 08 сентября 2011

Я пытаюсь загрузить локальный файл JSON, но он не будет работать.Вот мой код JavaScript (с использованием jQuery: 

var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);

Файл test.json: 

{"a" : "b", "c" : "d"}

Ничего не отображается, и Firebug сообщает мне, что данные не определены.json.responseText и это хорошо и правильно, но странно, когда я копирую строку: 

 var data = eval("(" +json.responseText + ")");

в консоли Firebug, она работает, и я могу получить доступ к данным.

У любого есть решение

Ответы [ 22 ]

0 голосов
/ 28 апреля 2017

Мне нравится использовать подход, заключающийся в том, чтобы дополнить / обернуть json объектным литералом, а затем сохранить файл с расширением .jsonp. Этот метод также оставляет исходный файл json (test.json) без изменений, поскольку вместо этого вы будете работать с новым файлом jsonp (test.jsonp). Имя в оболочке может быть любым, но оно должно совпадать с именем функции обратного вызова, которую вы используете для обработки jsonp. Я буду использовать ваш test.json, опубликованный в качестве примера, чтобы показать добавление оболочки jsonp для файла 'test.jsonp'. 

json_callback({"a" : "b", "c" : "d"});

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

var myJSON;

Далее идет простая функция для получения вашего json путем внедрения скрипта. Обратите внимание, что мы не можем использовать jQuery здесь, чтобы добавить скрипт в заголовок документа, так как IE не поддерживает метод jQuery .append. Метод jQuery, закомментированный в приведенном ниже коде, будет работать в других браузерах, которые поддерживают метод .append. Он включен в качестве ссылки, чтобы показать разницу. 

function getLocalJSON(json_url){
    var json_script  = document.createElement('script');
    json_script.type = 'text/javascript';
    json_script.src  = json_url;
    json_script.id   = 'json_script';
    document.getElementsByTagName('head')[0].appendChild(json_script);
    // $('head')[0].append(json_script); DOES NOT WORK in IE (.append method not supported)
}

Далее следует короткая и простая функция обратного вызова (с тем же именем, что и у оболочки jsonp) для передачи данных результатов json в глобальную переменную. 

function json_callback(response){
    myJSON = response;            // Clone response JSON to myJSON object
    $('#json_script').remove();   // Remove json_script from the document
}

Теперь к данным json могут обращаться любые функции скрипта с использованием точечной нотации. Как пример: 

console.log(myJSON.a); // Outputs 'b' to console
console.log(myJSON.c); // Outputs 'd' to console

Этот метод может немного отличаться от того, что вы привыкли видеть, но имеет много преимуществ. Во-первых, один и тот же файл jsonp можно загрузить локально или с сервера, используя те же функции. В качестве бонуса, jsonp уже находится в междоменном дружественном формате и также может легко использоваться с API типа REST.

Конечно, нет функций обработки ошибок, но зачем она вам нужна? Если вы не можете получить данные json с помощью этого метода, то можете поспорить, что у вас есть некоторые проблемы в самом json, и я бы проверил это на хорошем валидаторе JSON.

0 голосов
/ 26 мая 2015

Я не нашел никакого решения с помощью библиотеки Google Closure.Итак, чтобы завершить список будущих висторов, вот как вы загружаете JSON из локального файла с помощью библиотеки Closure: 

goog.net.XhrIo.send('../appData.json', function(evt) {
  var xhr = evt.target;
  var obj = xhr.getResponseJson(); //JSON parsed as Javascript object
  console.log(obj);
});
Страница:
...