Использование JSON с Jquery Ajax

Question

Этим утром я начал заниматься Jquery AJAX JSON. Я знаю Jquery, но JSON & Ajax - это что-то новое для меня.

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

используя следующий div в разделе body.

<div id="tabPanelWrapper"></div>

Javascript:

$(document).ready(function() {

    // Calling Ajax Function
    loadContent();                          

});

function loadContent() {
    $.ajax({
       type: "GET",
       url: "data.js",
       dataType: "json",
       cache: false,
       contentType: "application/json",
       success: function(data) {
        alert("Success");
        $.each(data.dashboard, function(i,post){
            $('#tabPanelWrapper').append('<ul><li>' + data.id + '</li><li>' + data.name +'</li></ul>');
        });
      },
        error: function(xhr, status, error) {
            alert(xhr.status);
        }
    });
}

Файл JSON:

{
    dashboard: [
    {
        "id": "tcm:20-1869",
        "name": "FEATURED ARTICLE"
    },
    {
        "id": "tcm:20-1869",
        "name": "FEATURED ARTICLE"
    }
]
}

Страница выдает ошибку 404. Пожалуйста, помогите мне с этим кодом.

Спасибо заранее | Локеш Ядав

Answer 1

ошибка 404 - ошибка страницы не найдена.Я бы попытался перейти к файлу data.js, к которому вы пытаетесь получить доступ, и, возможно, попытаться записать полный URL-адрес файла в вашем вызове .ajax.

Т.е.

 http://myhost.com/script/data.js

если это местоположение вашего скрипта.

ОБНОВЛЕНИЕ Ваша ошибка недействительна, Json.Если вы проверите аргумент error в вашей функции Error, вы увидите это.

Попробуйте добавить кавычки вокруг панели инструментов, и вы должны быть на шаг впереди!

И вам также придется изменить свой метод успеха:

 $.each(data.dashboard, function(i,post){
            $('#tabPanelWrapper').append('<ul><li>' + post.id + '</li><li>' + post.name +'</li></ul>');
        });

noteчто я смотрю на post.id и post.name, так как это текущий элемент в перечислении $ .each.data.id будет искать id-свойство рядом с приборной панелью в вашем Json, но его не существует.

Answer 2

Проверьте свойство URL.Ошибка 404 не является ошибкой json.

Answer 3

изменение

$.each(data.dashboard, function(i,post){
        $('#tabPanelWrapper').append('<ul><li>' + data.id + '</li><li>' + data.name +'</li></ul>');
});

до

 $.each(data.dashboard, function(i,post){
        $('#tabPanelWrapper').append('<ul><li>' + post.id + '</li><li>' + post.name +'</li></ul>');
 });

определенно ошибка 404 не связана с этим.