ajax json 예제 소스

위의 코드를 index.html, resources.js 및 resources.json이라고 부르는 3 개의 별도 파일에 붙여 넣습니다. 버튼을 누를 때 얻을 수있는 것은 테이블에 정의되지 않은 무리입니다. 첫 번째 단계에서는 웹 페이지에 표시할 정보 레코드를 포함하는 기본 json 파일을 만들어야 합니다. 이 예제에서는 단순히 JavaScript에 대 한 5 개의 교육 및 읽기 리소스의 목록을 포함 하려고: 즉, 이 코드는 임의의 환영 메시지를 표시 (별도 .json 파일에 지정 된) 우리의 웹 페이지의 상단에: 그것은 우리가 nee 주의 하는 것이 중요 하다 d 다시 보내려는 콘텐츠 유형에 따라 응답 데이터를 올바르게 포맷할 수 있습니다. 간단한 문자 메시지를 보내려면 콘텐츠 유형인 일반/텍스트로 응답합니다. 우리는 JSON으로 응답하려는 경우, 우리는 콘텐츠 유형을 보내드립니다 : 응용 프로그램 / json 및 같은 문자열 전후에 여분의 문자없이 제대로 포맷 된 JSON 문자열 : 우리의 위의 html은 단순히 스타일링및 설정에 대한 무료 부트 스트랩 CDN을 사용했습니다. 검색 리소스에 대한 링크와 ID가 있는 디스플레이 리소스 섹션입니다. 검색 리소스 ID는 JavaScript 코드에서 클릭 이벤트를 트리거하여 디스플레이 리소스 div 내부의 자리 표시자 콘텐츠를 JSON 파일의 콘텐츠로 바꿉니다. 그는 $.ajax 호출에서 “dataType: `json`을 제외했습니다.

추가하면 문제가 해결됩니다. 우리는 이미 스크립트와 샘플 JSON 파일을 보았다. 남은 것은 자바스크립트 파일에서 JSON 파일을 트리거하고 표시하는 데 사용되는 부품을 제공하는 웹 페이지뿐입니다. JSON이 유효한지 확인하기 위해 항상 무료 JSON Lint 서비스를 통해 실행하는 것이 좋습니다. json 파일을 resources.json으로 저장합니다. 즉시 jQuery에는 JSON 데이터를 요청, 전송 및 조작하는 데 사용할 수 있는 여러 Ajax 관련 함수가 기본으로 제공됩니다. 이러한 함수의 전체 목록은 jQuery 설명서에서 찾을 수 있습니다. 다음 예제에서는 $.ajax 함수를 사용 합니다. 이제 jQuery가 원격 소스에서 JSON 인코딩 된 데이터를로드하는 데 어떻게 도움이되는지 살펴보겠습니다. 여러분 가운데 참을성이 없는 경우, 기사의 끝을 향한 데모가 있습니다.

중요: jQuery 1.4에서 JSON 파일에 구문 오류가 있는 경우 요청은 일반적으로 자동으로 실패합니다. 이러한 이유로 JSON 데이터를 자주 직접 편집하지 마십시오. JSON은 JavaScript의 개체 리터럴 표기법보다 엄격한 구문 규칙이 있는 데이터 교환 형식입니다. 예를 들어 JSON에 표시되는 모든 문자열은 속성이든 값이든 관계없이 큰따옴표로 묶어야 합니다.