Jquery Ajax에서 JSON 사용

Question

오늘 아침 Jquery AJAX JSON 교육을 시작했습니다. Jquery에 대한 지식이 있지만 JSON & Ajax는 나에게 새로운 것이다.

아약스로 JSON 파일을 읽고 목록을 추가하여 데이터 값을 표시하는 작은 스 니펫 코드를 개발했습니다.

본문 섹션의 다음 div를 사용하십시오.

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

자바 스크립트 :

$(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 오류를 던지고있다. 이 코드를 도와주세요.

미리 감사드립니다. Lokesh Yadav

Answer 1

404 오류는 페이지가 없습니다. 액세스하려는 data.js 파일을 찾아 보려하고 .ajax 호출에서 전체 URL을 파일에 쓰려고합니다.

e.e.

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

는이 스크립트의 위치합니다.

업데이트 오류는 잘못되었습니다. Json. 오류 함수에서 오류 인수를 확인하면이를 볼 수 있습니다.

대시 보드 주변에 따옴표를 추가해보십시오. 그러면 한 걸음 더 나아가 야합니다!

그리고 당신은 또한 당신의 성공 방식으로 변경해야합니다 : 나는 post.id 및 post.name 찾고 있어요

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

메모를 그은 $ .each 열거에서 현재 항목이기 때문이다. data.id는 Json의 대시 보드 옆에있는 id-property를 찾았지만 존재하지 않습니다.

Answer 2

변화

$.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>'); 
}); 

에 defnitely 404이 오류로 인해 아니다.

Answer 3

URL 속성을 확인하십시오. 404 오류는 json 오류가 아닙니다.