jQuery 에서 ajax 와 관련 된 방법 을 모 으 기(필수 편)

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

요소 에 표시 하고 불 러 오기 단 추 를 사용 할 수 없습니다.다음 그림 에서 보 듯 이:

② getJSON()방법 으로 JSON 형식 데 이 터 를 비동기 로 불 러 옵 니 다.getJSON()방법 을 사용 하면 Ajax 비동기 요청 방식 으로 서버 의 배열 을 가 져 오고 가 져 온 데 이 터 를 분석 하여 페이지 에 표시 할 수 있 습 니 다.호출 형식 은 다음 과 같 습 니 다.jQuery.getJSON(url,[data],[callback])또는$.getJSON(url,[data],[callback])그 중에서 url 매개 변 수 는 json 형식 파일 을 불 러 오 기 를 요청 하 는 서버 주소 입 니 다.data 매개 변 수 를 요청 할 때 보 내 는 데이터 로 선택 할 수 있 습 니 다.callback 매개 변 수 는 데이터 요청 이 성공 한 후에 실 행 된 리 셋 함수 입 니 다.
예 를 들 어 페이지 에 있 는'불 러 오기'단 추 를 누 르 면 서버 에 있 는 JSON 형식 파일 의 데 이 터 를 가 져 오고 데 이 터 를 옮 겨 다 니 며 지정 한 필드 이름 내용 을 페이지 에 표시 합 니 다.다음 그림 에서 보 듯 이:

③ getScript()방법 으로 js 파일 을 비동기 로 불 러 오고 실행 합 니 다.getJSON()방법 을 사용 하여 서버 의 자바 스 크 립 트 형식의 파일 을 비동기 로 요청 하고 실행 합 니 다.호출 형식 은 다음 과 같 습 니 다.getScript()또는jQuery.getScript(url,[callback])매개 변수 url 은 서버 요청 주소 입 니 다.callback 매개 변 수 는 요청 이 성공 한 후 실행 되 는 리 셋 함수 입 니 다.
예 를 들 어"불 러 오기"단 추 를 누 르 면 서버 에서 지정 한 자바 스 크 립 트 형식의 파일 을 불 러 오고 실행 하 며 불 러 온 데이터 내용 을 페이지 에 표시 합 니 다.아래 그림 과 같 습 니 다.
브 라 우 저 에 표시 되 는 효과:

④ get()방법 을 사용 하여 서버 에서 GET 방식 으로 데 이 터 를 가 져 옵 니 다.
 $.getScript(url,[callback])방법 을 사용 할 때 GET 방식 으로 서버 에 데 이 터 를 요청 하고 방법 에서 함수 의 매개 변 수 를 통 해 요청 한 데 이 터 를 되 돌려 줍 니 다.호출 형식 은 다음 과 같 습 니 다.getScript()매개 변수 url 은 서버 요청 주소 입 니 다.callback 매개 변 수 는 요청 이 성공 한 후 실행 되 는 리 셋 함수 입 니 다.
예 를 들 어'불 러 오기'단 추 를 누 르 면 서버 에 있 는.php 파일 에 GET 방식 으로 데 이 터 를 요청 하고 되 돌아 오 는 데이터 내용 을 페이지 에 표시 합 니 다.다음 그림 과 같 습 니 다.

⑤ post()방법 을 사용 하여 서버 에서 POST 방식 으로 데 이 터 를 보 냅 니 다.get()방법 에 비해$.get(url,[callback])방법 은 POST 방식 으로 서버 에 데 이 터 를 보 내 고 서버 가 데 이 터 를 받 은 후에 처리 하 며 처리 결 과 를 페이지 로 되 돌려 줍 니 다.호출 형식 은 다음 과 같 습 니 다.get()매개 변수 url 은 서버 요청 주소 입 니 다.data 는 서버 에 요청 할 때 보 내 는 데 이 터 를 선택 할 수 있 습 니 다.callback 매개 변 수 는 요청 이 성공 한 후 실행 되 는 리 셋 함수 입 니 다.
예 를 들 어 입력 상자 에 숫자 를 입력 하고'검 측'단 추 를 누 르 면 호출get()방법 으로 서버 에 POST 방식 으로 요청 을 보 내 고 입력 값 의 패 리 티 를 검 측 하 며 다음 그림 과 같이 페이지 에 표 시 됩 니 다.

⑥ serialize()방법 으로 폼 요소 값 을 정렬 합 니 다.post()방법 을 사용 하면 폼 에 name 속성 이 있 는 요소 값 을 직렬 화 할 수 있 습 니 다.표준 URL 인 코딩 텍스트 문자열 을 생 성하 고 ajax 요청 에 직접 사용 할 수 있 습 니 다.호출 형식 은 다음 과 같 습 니 다.$.post(url,[data],[callback])그 중에서 selector 인 자 는 하나 이상 의 폼 에 있 는 요소 나 폼 요소 자체 입 니 다.
예 를 들 어 폼 에 여러 요 소 를 추가 하고'직렬 화'단 추 를 누 른 다음post()방법 으로 폼 요 소 를 직렬 화 한 표준 URL 인 코딩 텍스트 문자열 을 페이지 에 표시 합 니 다.다음 그림 과 같 습 니 다.

브 라 우 저 에 표시 되 는 효과:

⑦ ajax()방법 으로 서버 데 이 터 를 불 러 옵 니 다.
사용serialize()방법 은 최 하층,기능 이 가장 강 한 서버 데 이 터 를 요청 하 는 방법 입 니 다.서버 가 되 돌아 온 데 이 터 를 얻 을 수 있 을 뿐만 아니 라 서버 에 요청 을 보 내 고 수 치 를 전달 할 수 있 습 니 다.호출 형식 은 다음 과 같 습 니 다.$(selector).serialize()또는serialize()그 중에서 매개 변수 settings 는 ajax 요청 을 보 낼 때의 설정 대상 입 니 다.이 대상 에서 url 은 서버 가 요청 한 경 로 를 표시 합 니 다.data 는 요청 할 때 전달 하 는 데이터 입 니 다.dataType 은 서버 가 되 돌아 오 는 데이터 형식 입 니 다.success 는 성공 적 인 실행 을 요청 하 는 리 셋 함수 입 니 다.type 은 데이터 요청 을 보 내 는 방식 입 니 다.기본 값 은 get 입 니 다.
예 를 들 어 페이지 의'불 러 오기'단 추 를 누 르 면 서버 에 txt 파일 을 불 러 오 라 고 요청 하고 돌아 오 는 파일 의 내용 을 페이지 에 표시 합 니 다.아래 그림 과 같 습 니 다.

⑨ ajax Setup()방법 으로 전역 Ajax 기본 옵션 설정ajax()방법 을 사용 하면 Ajax 가 요청 한 전역 적 인 옵션 값 을 설정 할 수 있 습 니 다.설정 이 완료 되면 뒤의 Ajax 요청 은 이 옵션 값 을 추가 할 필요 가 없습니다.호출 형식 은 다음 과 같 습 니 다.jQuery.ajax([settings])또는$.ajax([settings])옵션 옵션 매개 변 수 를 대상 으로 하고 이 대상 을 통 해 Ajax 요청 시 전역 옵션 값 을 설정 합 니 다.
예 를 들 어 전체 Ajax 옵션 값 을 설정 하고 두 단 추 를 누 르 면 각각ajax()방법 으로 서로 다른 서버 데 이 터 를 요청 하고 데이터 내용 을 페이지 에 표시 합 니 다.다음 그림 과 같 습 니 다.

⑨ ajax Start()와 ajax Stop()방법 사용 하기ajaxSetup()와jQuery.ajaxSetup([options])방법 은 Ajax 사건 을 연결 하 는 것 입 니 다.ajax Start()방법 은 Ajax 요청 이 완료 되 기 전에 함 수 를 촉발 하 는 데 사 용 됩 니 다.ajax Stop()방법 은 Ajax 요청 이 완료 되면 함 수 를 촉발 하 는 데 사 용 됩 니 다.그들의 호출 형식 은:$.ajaxSetup([options])와ajaxSetup()그 중에서 두 가지 방법 중 괄호 는 모두 연 결 된 함수 입 니 다.Ajax 요청 을 보 내기 전에 실행ajax()방법 으로 연 결 된 함수 입 니 다.요청 이 성공 하면 ajax Stop()방법 으로 연 결 된 함 수 를 실행 합 니 다.
예 를 들 어 호출ajaxStart()방법 으로 서버 데 이 터 를 요청 하기 전에 애니메이션 디 스 플레이 를 사용 하여 불 러 오고 있 습 니 다.요청 이 성공 하면 이 애니메이션 은 자동 으로 숨 깁 니 다.다음 그림 과 같 습 니 다.

브 라 우 저 에서 의 결과:

그림 에서 보 듯 이ajaxStop()과$(selector).ajaxStart(function())방법 으로 애니메이션 요 소 를 연결 하기 때문에 Ajax 요청 을 보 내기 시 작 했 을 때 요소 가 표시 되 고 요청 이 완료 되면 애니메이션 요소 가 자동 으로 숨겨 집 니 다.
이상 의 이 편 은 jQuery 에서 ajax 와 관련 된 방법 을 바탕 으로 모 은 것 입 니 다.