Блог

Главная - Вопросы по программированию - Поиск ошибки в моем коде для синтаксического анализа JSON

Поиск ошибки в моем коде для синтаксического анализа JSON

#javascript #jquery #html #json

#javascript #jquery ( jquery ) #HTML #json

Вопрос:

Я часами гуглил и проверял документацию, но, похоже, не могу найти, что не так с моим jQuery… Я пытаюсь попрактиковаться в чтении локального JSON-файла и отображении содержимого в теле моего HTML-кода.

 $(document).ready(function(){
    $.getJSON( "test.json", function( data ) {
        var items = [];
        $.each( data, function( key, val ) {
            items.push( "<li id='"   key   "'>"   val   "</li>" );
            console.log(data); 
        });
        $( "<ul/>", {
            "class": "my-new-list",
            html: items.join( "" )
        }).appendTo( "body" );
    });

});

и вот фактический файл json в той же папке:

 {
  "one": "Singular sensation",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}

Я получаю пустое тело только тогда, когда открываю index.html . В index.html имеет

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/JavaScript" src="script.js"></script>

так что я знаю, что это не должно быть проблемой с моей связью….

Обновить: Вот мой новый вывод с консоли прямо сейчас:

  XMLHttpRequest cannot load file:///C:/Users/Steven/Desktop/meltApplication/test.json.    Received an invalid response. Origin 'null' is therefore not allowed access.

Комментарии:

1. Если вы console.log(data) видите ожидаемый объект?

2. Я не вижу ожидаемого объекта, на самом деле, я получаю ошибки (?). Не удалось загрузить ресурс: net::ERR_FILE_NOT_FOUND file://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js Неперехваченная ошибка ссылки: $ не определен в script.js:1

3. Когда вы не указываете префикс протокола в URL-адресе, он использует тот же протокол, который использовался для загрузки главной страницы. Таким образом, вы не можете получить доступ к CDN таким образом, если вы получаете доступ к своему index.html локально, вы должны получить index.html его с веб-сервера.

4. AJAX использует запрос XHR. HTTP -запрос XML. Вы не можете напрямую обращаться к файловой системе через HTTP-запросы из браузера. Это обречено на провал. Вам нужен надлежащий веб-сервер, обслуживающий контент через HTTP.

5. Просто понял, что с некоторым поиском, спасибо!

Ответ №1:

//: означает использовать ту же схему, что и на текущей странице, поэтому, если вы открыли свой файл локально (если URL в адресной строке — file://…), ваша схема — file:// , поэтому скрипт будет искать jQuery на вашем локальном компьютере в качестве ошибки указывает.

сделайте то, что сказал @Melvinr, чтобы правильно загрузить jQuery, после чего вы сможете продолжить отладку остальной части вашего кода.

Комментарии:

1. Следующая проблема заключается в том, что Ajax и «локальная файловая система» не смешиваются.

Ответ №2:

Вы не добавляете протокол http, поэтому это означает, что браузер попытается найти js локально

Используйте это, чтобы добавить ссылку на jquery

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Комментарии:

1. Вы не добавляете http: протокол, поэтому это означает, что браузер попытается найти js локально

2. Я имел в виду в вашем ответе 😉 Ответы только для кода плохие, они должны сопровождаться объяснением.

3. Спасибо, добавлено объяснение

Метки: