《 날 카 로 운 jQuery 》 요점 요약 (5) jQuery 와 ajax 의 응용 (하)

《 날 카 로 운 jQuery 》 요점 요약 (5) jQuery 와 ajax 의 응용 (하)
 2. 직렬 화 요소 1 serialize () 방법 은 앞에서 말 한 $. get () 과 $. post () 방법 을 먼저 살 펴 봅 니 다.

  
    

   
     <
   
     form 
   
     id
   
     ="form1"
   
      action
   
     ="#"
   
     >
   
     

   
     <
   
     p
   
     >
   
       
   
     </
   
     p
   
     >
   
     

   
     <
   
     p
   
     >
   
       
   
     <
   
     input 
   
     type
   
     ="text"
   
      name
   
     ="username"
   
      id
   
     ="username"
   
      
   
     /></
   
     p
   
     >
   
     

   
     <
   
     p
   
     >
   
       ：
   
     <
   
     textarea 
   
     name
   
     ="content"
   
      id
   
     ="content"
   
     ></
   
     textarea
   
     ></
   
     p
   
     >
   
     

   
     <
   
     p
   
     ><
   
     input 
   
     type
   
     ="button"
   
      id
   
     ="send"
   
      value
   
     ="  "
   
      
   
     /></
   
     p
   
     >
   
     

   
     </
   
     form
   
     >
  
    

이름과 내용 을 얻 기 위해 서 는 필드 의 값 을 data 매개 변수 에 하나씩 추가 해 야 합 니 다.

  
    

   
     $(
   
     "
   
     #send
   
     "
   
     ).click(
   
     function
   
     (){
$.get(
   
     "
   
     get1.php
   
     "
   
     ,{
username:$(
   
     "
   
     #username
   
     "
   
     ).val(),
content:$(
   
     "
   
     #content
   
     "
   
     ).val()
},
   
     function
   
     (data,textStatus){
$(
   
     "
   
     #resText
   
     "
   
     ).html(data); 
   
     //
   
                 
   
     

   
     });
});
  
    

만약 에 폼 요소 가 복잡 하 다 면 이런 방식 을 사용 하면 작업량 을 늘 리 는 동시에 폼 에 탄력 이 부족 하 다.serialize () 방법 을 사용 하여 다음 과 같이 고 칩 니 다.

  
    

   
     $(
   
     "
   
     #send
   
     "
   
     ).click(
   
     function
   
     (){
$.get(
   
     "
   
     get1.php
   
     "
   
     ,$(
   
     "
   
     form1
   
     "
   
     ).serialize(),
   
     function
   
     (data,textStatus){
$(
   
     "
   
     #resText
   
     "
   
     ).html(data); 
   
     //
   
                 
   
     

   
     });
});
  
    

폼 에 필드 를 추가 하 더 라 도 스 크 립 트 는 사용 할 수 있 으 며, serialize () 방법 은 문자 인 코딩 문 제 를 피 할 수 있 습 니 다 (P196).
serialize () 방법 은 jQuery 대상 에 작용 하기 때문에 폼 만 사용 할 수 있 는 것 이 아니 라 다른 선택 기 에서 선택 한 요소 도 모두 사용 할 수 있 습 니 다.예:

  
    

   
     $(
   
     "
   
     :checkbox,:radio
   
     "
   
     ).serialize();
   
     //
   
                        ，          。
  
    

 
2 serializeArray () 방법 (P196) DOM 요 소 를 정렬 한 후 JSON 형식의 데 이 터 를 되 돌려 줍 니 다.

  
    

   
     
   
     var
   
      fields 
   
     =
   
      $(
   
     "
   
     :checkbox,:radio
   
     "
   
     ).serializeArray();
console.log(fields); 
   
     //
   
      firebug  
  
    

$. each () 함 수 를 사용 하여 데 이 터 를 교체 출력 합 니 다:

  
    

   
     $(
   
     function
   
     (){

   
     var
   
      fields 
   
     =
   
      $(
   
     "
   
     :checkbox,:radio
   
     "
   
     ).serializeArray();
console.log(fields); 
   
     //
   
      firebug  
   
     

   
     $.each(fields,
   
     function
   
     (i,field){
$(
   
     "
   
     #results
   
     "
   
     ).append(field.value 
   
     +
   
      
   
     "
   
      , 
   
     "
   
     );
});
});
  
    

 
3 $. param () 방법 은 serialize () 방법의 핵심 으로 하나의 배열 이나 대상 을 key / value 에 따라 직렬 화 하 는 데 사용 된다.

  
    

   
     var
   
      obj 
   
     =
   
      {a:
   
     1
   
     ,b:
   
     2
   
     ,c:
   
     3
   
     };

   
     var
   
      k 
   
     =
   
      $.param(obj);
alert(k); 
   
     //
   
       a=1&b=2&c=3
  
    

3. jQuery 의 Ajax 전역 이벤트
예 를 들 어 Ajax 요청 이 시 작 될 때 ajax Start () 방법의 리 셋 함 수 를 촉발 합 니 다. Ajax 요청 이 끝 날 때 ajax Stop () 방법의 리 셋 함 수 를 촉발 합 니 다.예 를 들 어 원 격 콘 텐 츠 를 불 러 올 때 알림 정 보 를 추가 합 니 다. Ajax 요청 이 시 작 될 때 이 요 소 를 표시 합 니 다. Ajax 요청 이 끝나 면 이 요 소 를 숨 깁 니 다.

  
    

   
     <
   
     div 
   
     id
   
     ="loading"
   
     >
   
        ...
   
     </
   
     div
   
     >
  
    

  
    

   
     
   
     $(
   
     "
   
     #loading
   
     "
   
     ).ajaxStart(
   
     function
   
     (){
$(
   
     this
   
     ).show();
});
$(
   
     "
   
     #loading
   
     "
   
     ).ajaxStop(
   
     function
   
     (){
$(
   
     this
   
     ).hide();
});
  
    

이 페이지 의 다른 곳 에서 도 Ajax 를 사용한다 면 이 알림 정 보 는 전역 적 이기 때문에 유효 합 니 다.
기타 전역 이벤트:
ajax Complete (callback): Ajax 요청 완료 시 실행 되 는 함수
ajax Error (callback): Ajax 요청 이 잘못 되 었 을 때 실 행 된 함수 입 니 다. 포 착 된 오 류 는 마지막 매개 변수 로 ajax Send (callback) 를 전달 할 수 있 습 니 다. Ajax 요청 이 전송 되 기 전에 실 행 된 함수 ajaSuccess (callback): Ajax 요청 이 성공 할 때 실 행 된 함수 입 니 다. 전체 방법의 영향 을 받 지 않 으 려 면 $. ajax (options) 방법 을 사용 할 때,인자 의 global 을 false 로 설정 합 니 다.

  
    

   
     $.ajax({
url:
   
     "
   
     test.html
   
     "
   
     ,
global:
   
     false
   
      
   
     //
   
          Ajax  
   
     

   
     });
  
    

 
4. jQuery 기반 Ajax 채 팅 방 프로그램 설명 (P198, 약)