집 > 기사 > 웹 프론트엔드 > jQuery Ajax(load, post, get, ajax) 사용법에 대한 자세한 설명

jQuery Ajax(load, post, get, ajax) 사용법에 대한 자세한 설명

小云云원래의: 2018-01-23 17:11:151098검색

이 글에서는 주로 jQuery Ajax(load, post, get, ajax) 사용법에 대해 자세히 설명합니다. 에디터가 꽤 좋다고 생각해서 지금 공유해서 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

오늘 그룹에서 Jquery Ajax(load, post, get, ajax)의 차이점에 대해 질문하는 것을 보았습니다. 이제 네티즌들에게 도움이 되기를 바랍니다. 간단한 메소드,

이러한 메소드는 모두 jQuery.ajax()를 캡슐화하여 사용을 용이하게 하는 메소드입니다. 물론 복잡한 로직을 처리하려면 여전히 jQuery.ajax()를 사용해야 합니다(이에 대해서는 나중에 설명합니다). ) to).

1. load( url, [data], [callback] ): 원격 HTML 파일 코드를 로드하고 DOM에 삽입합니다.

url(문자열): 요청된 HTML 페이지의 URL 주소입니다.

data(Map): (선택적 매개변수) 서버로 전송되는 키/값 데이터입니다.

callback(콜백): (선택적 매개변수) 요청이 완료될 때의 콜백 함수입니다(성공할 필요는 없습니다).

이 메서드는 기본적으로 GET 메서드를 사용합니다. [data] 매개 변수에 데이터가 전달되면 자동으로 POST 메서드로 변환됩니다. jQuery 1.2에서는 선택기

를 지정하여 로드된 HTML 문서를 필터링할 수 있으며, 필터링된 HTML 코드만 DOM에 삽입됩니다. 구문은 "url #some > 선택기"와 같습니다.

이 방법을 사용하면 양식과 같은 일부 HTML 파일을 쉽게 동적으로 로드할 수 있습니다.

샘플 코드:

$(".ajax.load").load("http:
//www.jb51.net",function (responseText, textStatus, XMLHttpRequest)
{this;//在这里this指向的是当前的DOM对象，
即$(".ajax.load")[0]
 //alert(responseText);
//请求返回的内容
/alert(textStatus);
//请求状态：success，error
//alert(XMLHttpRequest);
//XMLHttpRequest对象});

참고: URL에 절대 경로를 쓰면 FF에서 오류가 발생하는 이유를 모르겠습니다. 알고 계시다면 알려주세요. 아래의 get() 및 post() 예제는 절대 경로를 사용하므로 FF에서는 오류가 발생하고 반환된 결과가 표시되지 않습니다. 크로스 도메인(cross-domain)이라고 불리는 get(), post() 예제도 있는데 업로드 후 결과를 얻을 수 있는 방법이 없어 실행 버튼을 제거했습니다.

2. jQuery.get( url, [data], [callback] ): GET 메소드를 사용하여 비동기 요청

매개변수:

url(문자열): 요청을 보낼 URL 주소.

data(지도) : (선택 사항) 서버로 전송할 데이터는 키/값 쌍의 형태로 표현되며 요청 URL에 QueryString으로 추가됩니다.

callback(함수): (선택) 로딩 성공 시 콜백 함수(Response의 반환 상태가 성공인 경우에만 이 메서드가 호출됩니다).

복잡한 $.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等等。

물론 여기서는 오류를 잡을 수 없습니다. 오류가 발생하면 콜백 함수가 전혀 실행되지 않기 때문입니다. //alert(this);});

요청을 보내려면 클릭하세요. :

jQuery.get() 콜백 이 함수는 Ajax 요청의 옵션 구성 정보를 가리킵니다.

3. jQuery.post( url, [data], [callback], [type] ): POST 메서드 사용 비동기 요청

매개변수:

url(String): 요청을 보낼 URL 주소

data(Map): (선택) 서버로 보낼 데이터로 키/값 형식으로 표현됩니다. 한 쌍.

callback(함수): (선택) 로딩 성공 시 콜백 함수(Response의 반환 상태가 성공인 경우에만 이 메서드가 호출됩니다).

type(문자열): (선택 사항) 공식적인 설명은 다음과 같습니다. 전송할 데이터 유형입니다. 사실 클라이언트가 요청한 타입이어야 합니다(JSON, XML 등)

복잡한 $.ajax를 대체하는 간단한 POST 요청 함수입니다. 요청이 성공하면 콜백 함수를 호출할 수 있습니다. 오류 발생 시 함수를 실행해야 하는 경우 $.ajax를 사용하세요.

샘플 코드:

Ajax.aspx:

Response.ContentType = "application/json";Response.Write("{result: &#39;" + Request["Name"] + ",你好！(这消息来自服务器)&#39;}");

j쿼리 코드:

$.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"으로 설정되어 있으므로 여기에 반환된 데이터는 객체이며, 이를 객체로 변환하기 위해 eval()을 사용할 필요가 없습니다.

4. jQuery.getScript( url, [callback] ): GET 메소드를 통해 JavaScript 파일을 로드하고 실행하도록 요청합니다.

Parameter

url(String): 로드할 JS 파일의 주소입니다.

callback(함수): (선택 사항) 성공적인 로드 후 콜백 함수입니다.

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(){// Complete 이벤트 처리 }// ...});

전역 이벤트는 모든 Ajax 요청에 의해 트리거됩니다. 위의 getScript() 예제에 로드된 스크립트는 전역 Ajax 이벤트입니다. 전역 이벤트는 다음과 같이 정의할 수 있습니다:

$("#loading").bind("ajaxSend", function(){$(this).show();}).bind("ajaxComplete", function(){ $( this).hide();});

또는:

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

이 작업을 수행할 수 있습니다. 특정 요청에서 전역 이벤트를 비활성화하려면 전역 옵션을 설정하기만 하면 됩니다:

$.ajax({url: "test.html",global: false,// 전역 Ajax 이벤트 비활성화.// ...});

위 글에서 jQuery Ajax(load, post, get, ajax) 사용법에 대한 자세한 논의는 모두 에디터가 공유한 내용이므로 참고가 되셨으면 좋겠고, Script Home에 많은 지원 부탁드립니다.

jQuery Ajax(load, post, get, ajax) 사용법에 대한 자세한 설명

관련 기사