jquery + ajax 성 시내 3 급 연동 효과 간단 한 예제 실현

본 논문 의 사례 는 jquery + ajax 가 성 시내 3 급 연동 효 과 를 실현 하 는 것 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다. 구체 적 으로 는 다음 과 같 습 니 다.
Ajax 를 배우 고 싶 었 습 니 다. 시간 이 없 었 습 니 다. 땀 이 났 다 는 핑 계 는 너무 억 지 스 러 웠 습 니 다. 튜 토리 얼 을 내 려 핸드폰 에서 여러 번 뒤 졌 습 니 다. 실전 을 한 번 도 하지 않 았 습 니 다.
최근 프로젝트 에서 Ajax 의 실현 효과 가 필요 해서 jquery 를 내 렸 습 니 다. 그리고 실례 를 찾 아 배 웠 습 니 다. 깨 달 았 습 니 다. NND, jquery 는 과연 강력 한 엉망 이 었 습 니 다. Ajax 를 실현 하 는 것 은 정말 힘 들 지 않 았 습 니 다. 다음은 학습 과정 을 여러분 과 공유 하 겠 습 니 다. jquery ajax 의 밑바닥 과 관련 이 있 는 지 는 아직 밝 혀 지지 않 았 지만 상관 없습니다. 우 리 는 바퀴 를 발명 할 필요 가 없습니다. 하하.
먼저 코드 를 올 리 면 성 시내 3 급 연동 ajax 효과 입 니 다.

     A -   
A -   B -   
C -   F -   
G -   G -   
G -   G -   
H -   H -   
H -   H -   
H -   H -    
J -   J -   
J -   L -   
N -   N -    
Q -   S -   
S -   S -   
S -   S -   
T -   T -   
X -   X -   
X -   Y -   
Z -   


      


      


function areas_load(id)
{
$.get("/ajax/areaajax.php", { areaid: id },
function(data){
$('#shi').html('<option value="">      </option>');
$('#xian').html('<option value="">      </option>');
if(id!=0) $('#shi').append(data);
 });
}
function area_load(id)
{
$.get("/ajax/areaajax.php", { areaid: id },
function(data){
$('#xian').html('<option value="">      </option>');
if(id!=0) $('#xian').append(data);
 });
}

코드 가 좀 졸렬 하 니 양해 해 주 십시오. 다음은 이 코드 의 작업 절 차 를 말씀 드 리 겠 습 니 다.
우선 페이지 에 jquery 의 js 라 이브 러 리 파일 을 불 러 왔 습 니 다. 이 건 더 말 할 필요 가 없습니다. 그 는 ajax 효과 로 이 루어 지 는 필수 적 인 부분 입 니 다.
드 롭 다운 상자 가 선택 되 었 을 때 onchange 이벤트 가 발생 했 습 니 다. 이 이 벤트 는 함수 areas 를 요청 하 였 습 니 다.load (), 다음 과 같 음:

function areas_load(id)
{
$.get("/ajax/areaajax.php", { areaid: id },
function(data){
$('#shi').html('      ');
$('#xian').html('      ');
if(id!=0) $('#shi').append(data);
 });
}

이 함 수 는 다음 과 같이 설명 합 니 다.
함수 가 실 행 될 때 get 방식 으로 매개 변수 areaid 가 지정 한 url 주 소 를 전달 하면 / ajax / areaax. phop? areaid = x 와 같은 주소 가 됩 니 다. 그리고 이 phop 파일 에서 areaid 의 값 을 받 아들 이 고 지정 한 코드 를 출력 합 니 다. function (data) 이것 이 phop 파일 에서 돌아 오 는 모든 코드 입 니 다. 물론 성공 적 으로 완 료 된 상태 입 니 다. jquery 가 이 과정 을 봉 인 했 기 때 문 입 니 다.그래서 여기 서 먼저 일어나 면 매우 간편 하고 빠 릅 니 다. $('\ # shi'). append (data) 를 사용 하여 지정 한 id 에 값 을 부여 합 니 다. 이러한 ajax 의 전체 과정 이 이 루어 집 니 다.
저 는 단지 가장 정수 적 인 부분 을 여러분 께 말씀 드 리 고 싶 을 뿐 입 니 다. 저 와 같은 초보 자 들 이 ajax 라 는 것 을 두려워 하지 않 고 많은 교재 에 국한 되 지 않 습 니 다. 아무리 말 하 는 것 이 좋 더 라 도 ajax 를 배우 고 싶 으 면 곧 행동 을 시작 할 수 있 습 니 다.
회 용 을 바탕 으로 밑바닥 의 실현 을 연구 하면 더욱 저력 이 있 고 인내심 과 자신 감 이 생 긴 다.
더 많은 jQuery 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,,,,,,,, 및
본 고 에서 말 한 것 이 여러분 의 jQuery 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.