$.ajax()방법 상세 설명 및 인 스 턴 스

1.url:
String 형식의 매개 변 수 를 요구 합 니 다.(기본 값 은 현재 페이지 주소)요청 한 주 소 를 보 냅 니 다.
2.type:
String 형식의 인 자 를 요구 합 니 다.요청 방식(post 또는 get)은 기본적으로 get 입 니 다.다른 http 요청 방법 을 주의 하 십시오.예 를 들 어 put 와 delete 도 사용 할 수 있 지만 일부 브 라 우 저 만 지원 합 니 다.
3.timeout:
Number 형식의 인자 로 요청 시간 초과(밀리초)를 설정 합 니 다.이 설정 은$.ajaxsetup()방법의 전역 설정 을 덮어 씁 니 다.
4.async:
Boolean 형식의 인 자 를 요구 합 니 다.기본 값 은 true 로 설정 되 어 있 으 며 모든 요청 은 비동기 요청 입 니 다.동기 화 요청 을 보 내 려 면 이 옵션 을 false 로 설정 하 십시오.동기 화 요청 은 브 라 우 저 를 잠 그 고 사용자 의 다른 작업 은 요청 이 완료 되 기 를 기 다 려 야 실행 할 수 있 습 니 다.
5.cache:
Boolean 형식의 인 자 를 요구 합 니 다.기본 값 은 true 입 니 다.(dataType 이 script 일 때 기본 값 은 false 입 니 다)false 로 설정 하면 브 라 우 저 캐 시 에서 요청 정 보 를 불 러 오지 않 습 니 다.
6.data:
Object 나 String 형식의 인자 로 서버 에 보 낼 데 이 터 를 요구 합 니 다.문자열 이 아니라면 자동 으로 문자열 형식 으로 변 환 됩 니 다.get 요청 은 url 에 추 가 됩 니 다.이러한 자동 변환 을 방지 하려 면 processData 옵션 을 볼 수 있 습 니 다.대상 은 key/value 형식 이 어야 합 니 다.예 를 들 어{foo 1:"bar 1",foo 2:"bar 2"}을&foo 1=bar 1&foo 2=bar 2 로 변환 해 야 합 니 다.배열 이 라면 JQuery 는 자동 으로 다른 값 으로 같은 이름 에 대응 합 니 다.예 를 들 어{foo:["bar 1","bar 2"]}을&foo=bar 1&foo=bar 2 로 전환 합 니 다.
7.dataType:
String 형식의 매개 변 수 를 요구 합 니 다.서버 가 되 돌아 올 것 으로 예상 되 는 데이터 형식 입 니 다.지정 하지 않 으 면 JQuery 는 http 패키지 mime 정보 에 따라 responseXML 또는 responseText 로 자동 으로 되 돌아 가 리 셋 함수 매개 변수 로 전 달 됩 니 다.사용 가능 한 종 류 는 다음 과 같 습 니 다:
xml:XML 문 서 를 되 돌려 줍 니 다.JQuery 로 처리 할 수 있 습 니 다.
html:텍스트 HTML 정 보 를 되 돌려 줍 니 다.포 함 된 script 탭 은 DOM 을 삽입 할 때 실 행 됩 니 다.
script:텍스트 자 바스 크 립 트 코드 를 되 돌려 줍 니 다.결 과 를 자동 으로 캐 시 하지 않 습 니 다.cache 인 자 를 설정 하지 않 는 한원 격 요청 시(같은 필드 에 있 지 않 음)모든 post 요청 이 get 요청 으로 전 환 됩 니 다.
json:JSON 데 이 터 를 되 돌려 줍 니 다.
jsonp:JSONP 형식 입 니 다.SONP 형식 으로 함 수 를 호출 할 때,예 를 들 어 myurl?callback=?,JQuery 는 다음"?"를 자동 으로 바 꿉 니 다.정확 한 함수 명 을 위해 리 셋 함 수 를 실행 합 니 다.
text:일반 텍스트 문자열 을 되 돌려 줍 니 다.
8.beforeSend:
Function 형식의 인 자 를 요구 합 니 다.요청 을 보 내기 전에 사용자 정의 HTTP 헤드 를 추가 하 는 등 XML HttpRequest 대상 의 함 수 를 수정 할 수 있 습 니 다.beforeSend 에서 false 로 돌아 가면 이번 ajax 요청 을 취소 할 수 있 습 니 다.XML HttpRequest 대상 은 유일한 인자 입 니 다.
function(XMLHttpRequest){
this; //이번 ajax 요청 시 전달 하 는 options 매개 변 수 를 호출 합 니 다.
}
9.complete:
Function 형식의 매개 변 수 를 요구 합 니 다.완료 후 호출 할 리 셋 함수(요청 이 성공 하거나 실 패 했 을 때 모두 호출)를 요청 합 니 다.인자:XML HttpRequest 대상 과 성공 요청 형식 을 설명 하 는 문자열 입 니 다.
function(XMLHttpRequest, textStatus){
this; //이번 ajax 요청 시 전달 하 는 options 매개 변 수 를 호출 합 니 다.
}
10.success:
Function 형식의 매개 변 수 를 요구 합 니 다.성공 후 호출 을 요청 하 는 반전 함수 에는 두 개의 매개 변수 가 있 습 니 다.
(1)서버 에서 되 돌아 오고 dataType 파라미터 에 따라 처리 한 데이터.
(2)상 태 를 설명 하 는 문자열 입 니 다.
function(data, textStatus){
//data 는 xmlDoc,jsonObj,html,text 등 일 수 있 습 니 다.
this; //이번 ajax 요청 시 전달 하 는 options 매개 변 수 를 호출 합 니 다.
}
11.error:
Function 형식의 인 자 를 요구 합 니 다.요청 이 실 패 했 을 때 호출 된 함수 입 니 다.이 함 수 는 XML HttpRequest 대상,오류 정보,캡 처 된 오류 대상(선택 가능)등 3 개의 인자 가 있 습 니 다.ajax 이벤트 함 수 는 다음 과 같 습 니 다:
function(XMLHttpRequest, textStatus, errorThrown){
//일반적인 상황 에서 textStatus 와 error Thrown 은 그 중 하나 만 정 보 를 포함 합 니 다.
this; //이번 ajax 요청 시 전달 하 는 options 매개 변 수 를 호출 합 니 다.
}
12.contentType:
String 형식의 인 자 를 요구 합 니 다.서버 에 메 시 지 를 보 낼 때 내용 인 코딩 형식 은 기본적으로"application/x-www-form-urlencoded"입 니 다.이 기본 값 은 대부분의 응용 장소 에 적합 합 니 다.
13.dataFilter:
Function 형식의 인자 로 Ajax 가 되 돌려 주 는 원본 데 이 터 를 미리 처리 하 는 함 수 를 요구 합 니 다.data 와 type 두 개의 인 자 를 제공 합 니 다.data 는 Ajax 가 되 돌려 주 는 원본 데이터 입 니 다.type 은 jQuery.ajax 를 호출 할 때 제공 하 는 dataType 인자 입 니 다.함수 가 되 돌아 오 는 값 은 jQuery 에서 처리 합 니 다.
function(data, type){
//처 리 된 데 이 터 를 되 돌려 줍 니 다.
return data;
}
14.dataFilter:
Function 형식의 인자 로 Ajax 가 되 돌려 주 는 원본 데 이 터 를 미리 처리 하 는 함 수 를 요구 합 니 다.data 와 type 두 개의 인 자 를 제공 합 니 다.data 는 Ajax 가 되 돌려 주 는 원본 데이터 입 니 다.type 은 jQuery.ajax 를 호출 할 때 제공 하 는 dataType 인자 입 니 다.함수 가 되 돌아 오 는 값 은 jQuery 에서 처리 합 니 다.
function(data, type){
//처 리 된 데 이 터 를 되 돌려 줍 니 다.
return data;
}
15.global:
Boolean 형식의 인 자 를 요구 합 니 다.기본 값 은 true 입 니 다.전역 ajax 이벤트 가 실 행 될 지 여부 입 니 다.false 로 설정 하면 전역 ajax 이벤트 가 발생 하지 않 습 니 다.ajax Start 나 ajax Stop 은 각종 ajax 이 벤트 를 제어 하 는 데 사용 할 수 있 습 니 다.
16.ifModified:
Boolean 형식의 인 자 를 요구 합 니 다.기본 값 은 false 입 니 다.서버 데이터 가 바 뀔 때 만 새 데 이 터 를 가 져 옵 니 다.서버 데이터 변경 판단 의 근 거 는 Last-Modified 헤드 정보 입 니 다.기본 값 은 false 입 니 다.즉,헤더 정 보 를 무시 합 니 다.
17.jsonp:
String 형식의 인 자 를 요구 합 니 다.jsonp 요청 에서 리 셋 함수 의 이름 을 다시 쓰 십시오.이 값 은"callback=?"을 대체 하 는 데 사 용 됩 니 다.이 GET 나 POST 요청 의 URL 인자 에 있 는"callback"부분,예 를 들 어{jsonp:"onJSonPLoad"}은"onJSonPLoad=?"서버 에 전송 하 다.
18.username:
String 형식의 인 자 를 요청 합 니 다.HTTP 접근 인증 요청 에 응답 하 는 사용자 이름 입 니 다.
19.password:
String 형식의 인 자 를 요청 합 니 다.HTTP 접근 인증 요청 에 응답 하 는 암호 입 니 다.
20.processData:
Boolean 형식의 인 자 를 요구 합 니 다.기본 값 은 true 입 니 다.기본 적 인 상황 에서 보 낸 데 이 터 는 기본 콘 텐 츠 형식 인'application/x-ww-form-urlencoded'에 맞 춰 대상 으로 전 환 됩 니 다.DOM 트 리 메 시 지 를 보 내 거나 다른 변환 을 원 하지 않 는 메 시 지 를 보 내 려 면 false 로 설정 하 십시오.
21.scriptCharset:
String 형식의 인 자 를 요구 합 니 다.요청 할 때 dataType 이"jsonp"또는"script"이 고 type 이 GET 일 때 만 문자 집합(charset)을 강제로 수정 할 수 있 습 니 다.보통 로 컬 과 원 격 콘 텐 츠 인 코딩 을 동시에 사용 하지 않 습 니 다.
사례 코드:
$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $('#resText').empty(); //  resText        var html = ''; 
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para"' + comment['content'] + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });
    });
});

예:a 탭 을 클릭 할 때 해당 하 는 아래 내용 을 표시 하고 ajax 를 통 해 이 루어 집 니 다.
<script type="text/javascript">
jQuery('.yd_content').load('yuding_tab0.html');
jQuery.ajax({
  url:"yuding_tab0.html",
  type:'get',
  data:{},
  dataType:"html",
  success: function(data){
   jQuery('.yd_content').html(data);
   },
  error: function(){
   alert('error');
   }
});
<script>

<script type="text/javascript">
jQuery('.jiudian_content .tab li').bind('click',
 function(){
 var _index=jQuery(this).index();
  jQuery.ajax({
    url:"yuding_tab"+_index+".html",
    type:'get',
    data:{},
    dataType:"html",
    success: function(data){
    jQuery('.yd_content').html(data);
    yuding();
    },
    error: function(){
    alert('error');
    }
    });
 })

</script>

좋은 웹페이지 즐겨찾기