jQuery Ajax(load,post,get,ajax)의 용법 에 대해 자세히 이야기 합 니 다.

오늘 은 그룹 내 에서 Jquery Ajax 의(load,post,get,ajax)차 이 를 묻 는 네티즌 들 의 질문 을 받 았 습 니 다.지금 은 한 편의 글 을 정리 해 보 았 습 니 다.네티즌 들 에 게 도움 이 되 었 으 면 좋 겠 습 니 다.우선 간단 한 방법 을 살 펴 보 겠 습 니 다.
이 방법 들 은 모두 jQuery.ajax()를 봉인 하여 우리 가 사용 하기에 편리 한 방법 입 니 다.물론 복잡 한 논 리 를 처리 하려 면 jQuery.ajax()를 사용 해 야 합 니 다.
1.load(url,[data],[callback]):원 격 HTML 파일 코드 를 불 러 오고 DOM 에 삽입 합 니 다.
url(String):요청 한 HTML 페이지 의 URL 주소 입 니 다.
data (Map) ： (선택 가능 한 인자)서버 에 보 내 는 key/value 데이터 입 니 다.
콜백(Callback):(선택 가능 한 인자)요청 이 완료 되 었 을 때(success 가 필요 없 음)의 리 셋 함수 입 니 다.
이 방법 은 기본적으로 GET 방식 으로 전 달 됩 니 다.[data]매개 변수 가 전달 데이터 가 들 어가 면 자동 으로 POST 방식 으로 전 환 됩 니 다.jQuery 1.2 에서 선택 부 를 지정 할 수 있 습 니 다.
불 러 온 HTML 문 서 를 선택 합 니 다.DOM 은 선 택 된 HTML 코드 만 삽입 합 니 다.문법 형 은"url\#some>selector"와 같 습 니 다.
이 방법 은 폼 과 같은 HTML 파일 을 동적 으로 불 러 올 수 있 습 니 다.
예제 코드:
$(".ajax.load").load("https://www.jb51.net",function (responseText, textStatus, XMLHttpRequest){this;//여기 서 this 가 가리 키 는 것 은 현재 DOM 대상 입 니 다.
즉$(".aax.load")[0]//alert(responseText);/되 돌려 달라 고 요청 한 내용//alert(textStatus);/요청 상태:success,error/alert(XML HttpRequest);//XMLHttpRequest 대상});
주:URL 에 절대 경 로 를 쓰 는 이 유 를 모 르 겠 습 니 다.FF 에서 오류 가 발생 할 수 있 습 니 다.아 시 는 분 은 알려 주세요.아래 get()과 post()예제 에 서 는 절대 경 로 를 사용 하기 때문에 FF 에서 실 수 를 하고 결 과 를 되 돌려 주지 않 습 니 다.그리고 get()과 post()예제 가 모두 도 메 인 을 넘 어 호출 되 었 습 니 다.올 라 오 면 결 과 를 얻 을 수 없 기 때문에 실행 단 추 를 지 웠 습 니 다.
2,jQuery.get(url,[data],[callback]):GET 방식 으로 비동기 요청
인자:
url(String):요청 한 URL 주 소 를 보 냅 니 다.
data(Map):(선택 가능)서버 에 보 낼 데 이 터 는 Key/value 의 키 로 형식 을 표시 하여 QueryString 으로 요청 URL 에 추 가 됩 니 다.
콜백(Function):(선택 가능)불 러 오 는 데 성 공 했 을 때 리 셋 함수(Response 의 리 턴 상태 가 success 일 때 만 이 방법 을 호출 합 니 다).
복잡 한$.ajax 대신 간단 한 GET 요청 기능 입 니 다.요청 이 성공 할 때 리 셋 함 수 를 호출 할 수 있 습 니 다.오류 가 발생 했 을 때 함 수 를 실행 하려 면$.ajax 를 사용 하 십시오.
예제 코드:
$.get("./ajax.aspx",{Action:"get",Name:"lulu"},function(data,textStatus){//되 돌아 오 는 data 는 xmlDoc,jsonObj,html,text 등 이 될 수 있 습 니 다.this;/여기 서 this 가 가리 키 는 것 은 Ajax 가 요청 한 옵션 설정 정보 입 니 다.아래 그림 alert(data)를 참고 하 십시오.//alert(textStatus);//요청 상태:success,error 등등.
물론 여기 에는 error 가 포착 되 지 않 습 니 다.error 때 이 반전 함수/alert(this)를 실행 하지 않 기 때 문 입 니 다.});
클릭 하여 요청 발송:
jQuery.get()리 셋 함수 에 있 는 this 는 Ajax 가 요청 한 옵션 설정 정 보 를 가리 키 고 있 습 니 다.
3,jQuery.post(url,[data],[callback],[type]):POST 방식 으로 비동기 요청
인자:
url(String):요청 한 URL 주 소 를 보 냅 니 다.
data(Map):(선택 가능)서버 에 보 낼 데 이 터 는 Key/value 의 키 로 표시 합 니 다.
콜백(Function):(선택 가능)불 러 오 는 데 성 공 했 을 때 리 셋 함수(Response 의 리 턴 상태 가 success 일 때 만 이 방법 을 호출 합 니 다).
type(String):(선택 가능)공식 설명 은 Type of data to be sent 입 니 다.사실 클 라 이언 트 에 요청 해 야 할 유형(JSON,XML 등)
복잡 한$.ajax 대신 간단 한 POST 요청 기능 입 니 다.요청 이 성공 할 때 리 셋 함 수 를 호출 할 수 있 습 니 다.오류 가 발생 했 을 때 함 수 를 실행 하려 면$.ajax 를 사용 하 십시오.
예제 코드:
Ajax.aspx：
Response.ContentType = "application/json";Response.Write("{result:"+Request["Name"]+",안녕하세요!이 메 시 지 는 서버 에서 왔 습 니 다)'}');
jQuery 코드:
$.post("Ajax.aspx",{Action:"post",Name:"lulu"},function(data,textStatus){//data 는 xmlDoc,jsonObj,html,text 등 일 수 있 습 니 다.//this;/이 Ajax 가 요청 한 옵션 설정 정 보 는 jQuery.get()이 말 한 thisalert(data.result);}을 참고 하 십시오."json");
클릭 하여 제출:
요청 한 형식 을"json"으로 설정 하 였 습 니 다.
요청 한 형식 을"json"으로 설정 했다 면,Response 가 돌아 온 ContentType 을"Response.ContentType="application/json"으로 설정 하지 않 았 습 니 다.그러면 되 돌아 오 는 데 이 터 를 포착 할 수 없 을 것 이다.
주의 하 세 요.alert(data.result);Accept 헤더 가'json'으로 설정 되 어 있 기 때문에 여기 서 돌아 오 는 data 는 하나의 대상 이 며 eval()로 대상 으로 전환 할 필요 가 없습니다.
4.jQuery.getScript(url,[callback]):GET 방식 으로 자 바스 크 립 트 파일 을 불 러 오고 실행 할 것 을 요청 합 니 다.
매개 변수
url(String):JS 파일 주 소 를 불 러 올 때 까지 기다 리 십시오.
callback(Function):(선택 가능)불 러 온 후 반전 함수 입 니 다.
jQuery 1.2 버 전 이전에 getScript 는 같은 도 메 인 JS 파일 만 호출 할 수 있 습 니 다.1.2 에서 도 메 인 을 넘 어 JavaScript 파일 을 호출 할 수 있 습 니 다.메모:Safari 2 또는 더 빠 른 버 전 은 전역 역할 영역 에서 스 크 립 트 를 동기 화 할 수 없습니다.getScript 를 통 해 스 크 립 트 를 추가 하면 지연 함 수 를 추가 하 십시오.
이 방법 은 편집기 focus()만 있 을 때 편집기 에 필요 한 JS 파일 을 불 러 오 는 데 사용 할 수 있 습 니 다.다음 예제 코드 를 보 겠 습 니 다.
test.js 를 불 러 오고 실행 합 니 다.
jQuery 코드:
$.getScript("test.js");
AjaxEvent.js 를 불 러 오고 실행 하 며 성공 하면 정 보 를 표시 합 니 다.
jQuery 코드:
$.getScript("AjaxEvent.js",function(){alert("AjaxEvent.js 로드 완료 및 실행 완료.위의 Get 또는 Post 단 추 를 누 르 면 무엇이 다른 지 확인 하 십시오.");}
jQuery Ajax 이벤트
Ajax 요청 은 여러 가지 다른 사건 이 발생 할 수 있 습 니 다.우 리 는 이 사건 들 을 구독 하고 그 중에서 우리 의 논 리 를 처리 할 수 있 습 니 다.jQuery 에 서 는 두 가지 Ajax 사건 이 있 습 니 다.국부 사건 과 전체 사건 입 니 다.
부분 이 벤트 는 Ajax 가 요청 할 때마다 방법 내 에서 정 의 됩 니 다.예 를 들 어:
$.ajax({beforeSend: function(){// Handle the beforeSend event},complete: function(){// Handle the complete event}// ...});
전역 이 벤트 는 매번 Ajax 요청 이 실 행 됩 니 다.DOM 의 모든 요소 에 방송 합 니 다.위 getScript()예제 에 불 러 온 스 크 립 트 는 전역 Ajax 이벤트 입 니 다.전역 이 벤트 는 다음 과 같이 정의 할 수 있 습 니 다.
$("#loading").bind("ajaxSend", function(){$(this).show();}).bind("ajaxComplete", function(){$(this).hide();});
또는:
$("#loading").ajaxStart(function(){$(this).show();});
우 리 는 특정한 요청 에서 전역 이 벤트 를 비활성화 할 수 있 습 니 다.global 옵션 만 설정 하면 됩 니 다.
$.ajax({url:"test.html",global:false,/전역 Ajax 이벤트 사용 하지 않 음.//...});
이 편 은 jQuery Ajax(load,post,get,ajax)의 용법 이 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.