아래 이미지와 같이 웹 페이지를 디자인하고 싶습니다. 3 개의 패널 (1,2,3)이 있습니다. 팀 (패널 1)을 클릭하면 패널 2와 3a가 채워집니다. 그런 다음 특정 그룹 (G1)을 클릭하면 패널 3b가 채워집니다. 그런 다음 특정 동물 (A1)을 클릭하면 패널 3c가 채워집니다. 데이터는 PHP를 사용하여 Oracle 데이터베이스에서 얻습니다.동일한 페이지에 동적 데이터를 표시하는 AJAX 함수
저는 AJAX를 처음 사용합니다. 이 작업을 수행하는 가장 효율적인 방법을 알려주십시오. 당신이 자바 스크립트/아약스와의 새로운면
당신에게
산
jQuery와 같은 Javascript 프레임 워크를 사용하는 것이 좋습니다. AJAX를 사용하면 많은 고통을 겪습니다 (http://api.jquery.com/jQuery.get/ 참조). 당신이 데이터를 검색 할 수있는 몇 가지 방법있다
:
이 가장 쉬운 방법은 (2) PHP 스크립트 내에서, 그리고 에 HTML을로드하기위한 전체 테이블을 생성하는 것입니다 컨테이너 div. 의 단점은 HTML 템플릿을 변경하려는 경우 으로 PHP 파일을 변경해야한다는 것입니다.
또는, JSON 형식으로 사용하면 PHP (- http://www.php.net/manual/en/function.json-encode.php PHP에서 json_encode() 사용)에서 데이터를 에코 할 수 있습니다. 그러면 데이터 배열을 만들고 echo json_encode($data);을 작성하십시오. 은 jQuery.get()을 사용하여 JSON으로로드 할 수 있습니다.
이 작업을 완료하면 표의 이전 행 (표제 제외)을 지우고 새 번호 개를 추가해야합니다. 다시 말하지만, jQuery는 프로세스를 단순화 할 것이지만 에 많은 경험이 없다면 쉽지 않을 것입니다.
내가 말했듯이 첫 번째 방법은 상당히 기본적인 PHP와 자바 스크립트 만 사용하기 때문에 훨씬 쉽습니다. 두 번째 방법은 더 깨끗하고 유연하며 대역폭이 가볍지 만 더 어렵습니다.
3 (a-c) 채우기는 본질적으로 동일한 문제입니다. PHP에서 전체 내용을 생성하고 컨테이너 HTML을 설정하거나 기본 HTML 템플릿을 div 안에 넣고 (CSS : display:none;을 사용하여 숨김) 해당 템플릿을 채울 수 있습니다.
여기서 AJAX의 모든 기본 사항을 제공 할 수는 없지만 웹 서버는 JSON과 같은 구문 분석 방식으로 데이터를 반환해야합니다. 링크를 클릭하면'jQuery.ajax()'를 사용하여 AJAX 호출을하고 결과를 적절히 파싱합니다. – pimvdb