jQuery의 속기 Ajax 방법에 대한 소개

코어 포인트

jQuery 약어 Ajax 메소드는 ajax 호출을 단순화하는 메소드를 제공하며,이 방법은 사전 설정 구성을 사용하여 특정 목적으로

메소드를 랩핑합니다. 이 기사에서 논의 된 방법에는

,
• 및 $.ajax()가 포함됩니다. load() $.post() 메소드를 사용하면 서버에서 데이터를로드하여 선택한 요소에 배치 할 수 있습니다. URL, 옵션 데이터 및 선택적 콜백 함수를 사용합니다. 이 방법은 웹 페이지의 주요 내용을 비동기로로드하는 데 사용될 수 있습니다. $.get()
메소드는 서버에 게시물 요청을 보내고 요청 본문의 일부로 데이터를 보내는 데 사용됩니다. 이 방법은 서버 측 상태의 변경을 유발할 수있는 요청에 이상적입니다.
• load() 메소드는 서버에 대한 GET 요청을 시작합니다. 이는 서버가 주어진 매개 변수 세트에 대해 항상 동일한 결과를 반환하거나 사용자가 리소스를 공유 해야하는 상황에 이상적입니다.
• Ajax라는 용어에 대해 들어 본 적이 없습니까? 나는 거의 모든 사람의 손이 몸에 가까이 내려질 것입니다. Ajax (원래 비동기 JavaScript 및 XML의 약자)는 비동기 웹 사이트 및 웹 응용 프로그램을 만드는 데 도움이되는 가장 일반적으로 사용되는 클라이언트 방법 중 하나입니다. $.post() 물론 RAW JavaScript를 사용하여 Ajax 호출을 실행할 수 있지만 코드의 모든 다른 부분을 처리하는 것이 문제가 될 수 있습니다. Internet Explorer 6과 같은 오래된 브라우저를 지원 해야하는 경우 특히 그렇습니다.
운 좋게도 jQuery는 이러한 문제를 처리 할 수있는 일련의 방법을 제공하여 코드로 수행하려는 작업에 집중할 수 있습니다. JQuery는 귀하의 요구에 맞게 고도로 구성 할 수있는 주요 방법
• 를 제공합니다. 또한 약어 방법이라고하는 일련의 약어 방법을 제공합니다. 이들은 각각 단일 목적을 제공하는 사전 설정 구성이있는 $.get() 방법의 포장지 일뿐입니다.
메소드와는 달리, 모든 방법은 공통점이 있습니다. DOM 요소 세트에서 작동하지 않지만 jQuery 객체에서 직접 호출됩니다. 그러므로 우리는 다음과 같은 진술을 쓰지 않을 것입니다

이것은 페이지의 모든 단락을 선택한 다음

메소드를 호출하고 대신 다음을 작성합니다.

이 기사에서는 가장 일반적으로 사용되는 세 가지 jQuery 약어 방법 인 ,

및 에 대해 논의 할 것입니다.

load () 우리가 논의 할 첫 번째 방법은 $.ajax()입니다. 서버에서 데이터를로드하고 반환 된 데이터 (일반적으로 HTML 코드)를 일치하는 요소에 넣을 수 있습니다. 실제로 사용하기 전에 서명을 살펴 보겠습니다 : $.ajax()

각 매개 변수의 의미는 다음과 같습니다

• : 요청을 보내려는 자원의 URL을 지정하는 문자열; url : 잘 형성된 쿼리 문자열이어야하는 선택적 문자열 또는 요청 매개 변수로 전달되어야하는 객체입니다. 문자열이 전달되면 요청 메소드가 가져오고 객체가 전달되면 요청 메소드가 게시됩니다. 이 매개 변수가 생략되면 get 메소드가 사용됩니다
: AJAX 요청이 완료된 후 호출 된 선택적 콜백 함수. 이 함수는 최대 3 개의 매개 변수, 즉 응답 텍스트, 요청 된 상태 문자열 및 JQXHR 인스턴스를 허용합니다. 콜백 함수 내부에서 컨텍스트 (this)는 컬렉션의 각 요소에 하나씩 설정됩니다.
• data 이것은 사용하기 어려운 것처럼 보입니까? 특정 예를 살펴 보겠습니다.
주 내용을 나타내는 ID 메인이있는 웹 사이트에 요소가 있다고 가정합니다. 우리가하고 싶은 것은 메인 메뉴의 링크에서 참조 된 페이지의 기본 내용을 비동기로로드하는 것입니다. 이상적으로 ID는 메인 메뉴입니다. 나머지 레이아웃이 변경되지 않으므로로드 할 필요가 없기 때문에이 요소 내부의 내용을 검색하려고합니다.
• 이 접근법은 웹 사이트를 방문하는 사용자가 JavaScript를 비활성화 한 경우 일반적인 동기화 메커니즘을 사용하여 웹 사이트를 탐색 할 수 있기 때문에 향상되었습니다. 이 기능은 웹 사이트의 성능을 향상시킬 수 있으므로 구현하려고합니다. 이 예에서는 메뉴의 모든 링크가 내부 링크라고 가정합니다. callback jQuery 및

기다려! 이 코드에 무엇이 잘못되었는지 알 수 있습니까? 여러분 중 일부는이 코드가 기본 콘텐츠뿐만 아니라 참조 페이지의 모든 이 문제를 해결하기 위해 JQuery를 사용하면 지정된 URL 직후에 선택기를 추가 할 수 있습니다. 메소드 의이 함수를 사용하여 이전 코드를 다시 작성할 수 있습니다. 이번에는 페이지를 검색 한 다음 HTML 코드를 필터링하여 ID 메인으로 요소의 후손 만 주입합니다. 우리는 #main 요소 내부에 #main 요소가있는 것을 피하기를 원하기 때문에 범용 선택기 (

)를 포함합니다.

이 예제는 양호하지만 사용 가능한 매개 변수 중 하나의 사용 만 보여줍니다. 더 많은 코드를 살펴 보겠습니다!

rod () 와 함께 콜백 함수를 사용하십시오 콜백 매개 변수를 사용하여 사용자에게 작업 완료를 알릴 수 있습니다. 마지막으로 사용하려면 이전 예제를 업데이트합시다.

이번에는 ID 알림 바가있는 요소가 있다고 가정하고 ... 알림 표시 줄로 사용될 것입니다.

load() 우리가

를 마스터 할 때 다음 방법에주의를 돌 봅시다.

$('p').ajax(...);

$. post () 때때로 서버에서 반환 한 컨텐츠를 하나 이상의 요소로 주입하려고합니다. 데이터를 검색 한 후 데이터를 검색 한 후 데이터를 결정할 수 있습니다. 이렇게하려면

또는 $.post() 메소드를 사용할 수 있습니다. $.get() 는 기능적으로 유사하며 (서버에 대한 요청) 서명 및 허용 매개 변수 측면에서 동일합니다. 유일한 차이점은 하나는 게시물 요청을 보내고 다른 하나는 GET 요청을 보냅니다. 분명히 그렇지 않습니까?

게시물 요청과 GET 요청의 차이를 기억하지 못하면 요청으로 인해 서버 측 상태가 변경되어 다른 응답이 발생할 수있는 경우 게시물을 사용해야합니다. 그렇지 않으면 GET 요청이어야합니다.

메소드의 서명은 다음과 같습니다

매개 변수는 다음과 같습니다

: 요청을 보내려는 자원의 URL을 지정하는 문자열;

: jQuery가 사후 요청의 일부로 전송 될 선택적 문자열 또는 객체; : 요청이 성공한 후 실행 된 콜백 함수가 실행됩니다. 콜백 함수 내부에서 컨텍스트 (this)는 통화에 사용 된 Ajax 설정을 나타내는 객체를 나타내도록 설정됩니다. $.post()

: 응답 본문을 해석하는 방법을 지정하는 선택적 문자열. 허용되는 값은 HTML, 텍스트, XML, JSON, 스크립트 및 JSONP입니다. 이것은 또한 여러 공간 분리 된 값의 문자열 일 수도 있습니다. 이 경우 jQuery는 한 유형을 다른 유형으로 변환합니다. 예를 들어, 응답이 텍스트이고 XML로 취급하려면 "텍스트 XML"을 쓸 수 있습니다. 이 매개 변수가 생략되면 응답 텍스트는 처리 나 평가없이 콜백 함수로 전달되며 jQuery는 올바른 형식을 추측하기 위해 최선을 다합니다.

$('p').ajax(...);

이제

가 무엇을 할 수 있는지, 매개 변수가 무엇인지 알았으므로 코드를 작성해 봅시다.

우리가 작성할 양식이 있다고 가정 해 봅시다. 필드가 초점을 잃을 때마다 필드 데이터를 서버로 보내기 위해 유효성을 확인하려고합니다. 서버가 정보를 JSON 형식으로 반환한다고 가정합니다. 일반적인 사용 사례는 사용자가 선택한 사용자 이름이 아직 점유되지 않았는지 확인하는 것입니다.
• 이 기능을 구현하려면 다음과 같이 jQuery의 url 메소드를 사용할 수 있습니다.
이 코드에서는 상대 URL "/User"로 식별 된 페이지에 게시물 요청을 보냅니다. 또한 두 번째 매개 변수 데이터를 사용하여 서버에 초점을 잃는 필드의 이름과 값을 보냅니다. 마지막으로, 콜백 함수를 사용하여 반환 된 JSON 객체의 상태 속성 값이 오류인지 확인합니다.이 경우 오류 메시지 (메시지 속성에 저장)를 사용자에게 표시합니다.
• 이 유형의 JSON 객체가 어떻게 보일지 더 잘 이해하기 위해 다음은 다음과 같습니다. data 내가 말했듯이,
는
• 와 동일합니다. 따라서 다음 섹션은 매우 짧으며 동일한 정보를 반복하는 대신 일부 사용 사례에 중점을 둘 것입니다. callback $. get ()

는 jQuery가 GET 요청을 발행하기 위해 제공 한 방법 중 하나입니다. 이 메소드는 지정된 URL과 제공된 선택 데이터를 사용하여 서버에 대한 GET 요청을 시작합니다. 요청이 완료되면 콜백 함수를 실행할 수도 있습니다. 서명은 다음과 같습니다. $.get()

매개 변수는

$('p').ajax(...);

메소드의 매개 변수와 동일하므로 여기서는 반복하지 않습니다.

기능은 서버가 항상 주어진 매개 변수 세트에 대해 동일한 결과를 반환하는 경우에 이상적입니다. 또한 사용자가 공유 할 수있는 리소스에도 적합한 선택입니다. 예를 들어, 운송 서비스 (예 : 기차 시간표 정보)의 경우 동일한 날짜와 시간을 검색하는 사람들은 동일한 결과를 얻어야하며 GET 요청이 이상적입니다. 또한 페이지가 요청에 응답 할 수있는 경우 사용자는 친구와의 결과를 URL의 마술과 공유 할 수 있습니다. $.post() 결론

이 기사에서는 jQuery에 가장 일반적으로 사용되는 Ajax 약어 방법에 대해 논의합니다. 그들은 Ajax 요청을 수행하는 매우 편리한 방법이며, 우리가 볼 수 있듯이 기본 버전에서는 원하는 것을 달성하기 위해 한 줄의 코드 만 필요합니다. $.get() 이러한 방법 및 기타 방법에 대한 자세한 내용은 JQuery의 Ajax 약어 문서를 확인하십시오. 우리는 여기서 다른 내용을 논의하지는 않지만이 기사에서 얻은 지식을 사용하여 다른 방법을 시작할 수 있어야합니다.

(FAQ 섹션은 여기에 추가되어야합니다. 컨텐츠는 입력 텍스트의 FAQ 섹션과 동일합니다)

위 내용은 jQuery의 속기 Ajax 방법에 대한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!