JQuery의 Ajax 캡슐화에 대한 설명-JS 튜토리얼-php.cn

JQuery의 Ajax 캡슐화에 대한 설명

巴扎黑

풀어 주다： 2017-07-23 14:51:09

원래의

1172명이 탐색했습니다.

일부 페이지 효과, 검증 등의 경우 우리는 모두 JavaScript 언어를 사용하여 완성하지만 이는 가장 기본적인 프런트엔드 언어인 Java 코드와도 같으며 jQuery는 js 코드를 캡슐화하여 프런트엔드 코드를 용이하게 합니다. 글쓰기는 또한 브라우저 호환성 문제를 해결하는 데 있어서 매우 큰 이점을 갖고 있으며, 이는 우리가 이를 사용하는 것이 매우 중요한 이유 중 하나입니다.

이제 사용자의 요구를 충족하기 위해 Ajax(Asynchronous JavaScript + XML) 비동기 새로 고침은 비교할 수 없는 역할을 합니다. 과거에는 Ajax 작업을 작성하려면 항상 JDBC 코드와 같은 몇 가지 필수 단계를 수행해야 했습니다. AJAX — —핵심 XMLHttpRequest 객체와 jQuery는 Ajax 비동기 작업도 캡슐화합니다. 다음은 일반적으로 사용되는 몇 가지 방법입니다.

$.ajax, $.post, $.get, $.getJSON.

1. $.ajax는 jquery가 ajax를 캡슐화하는 가장 기본적인 단계입니다. 이 함수를 사용하면 비동기 통신의 모든 기능을 완성할 수 있습니다. 즉, 어떤 상황에서도 이 메서드를 통해 비동기 새로 고침 작업을 수행할 수 있습니다. 하지만 매개변수가 너무 많아 때로는 약간 문제가 될 수도 있습니다. 일반적으로 사용되는 매개변수를 살펴보세요.

var configObj = {

~ ~ // }

$.ajax(configObj);//$.ajax 함수를 통해 호출됩니다.个一一, 비동기 삭제의 예를 살펴보세요:

& lt;span style =
"font-size: 18px;"
// 삭제

URL :
"$ {pagecontext.request.contextpath} /org/dodelete.action",

// path

전송 Json 형식으로
~ >ㅋㅋ ~
데이터 실패");
.$, $.Post에 따르면 이 기능은 실제로 $.ajax를 추가로 패키징하여 매개변수를 줄이고 작업을 단순화하지만 사용 범위는 더 작습니다. $.post는 데이터 제출 방법을 단순화하고 POST를 통해서만 제출할 수 있습니다. 서버에는 동기식이 아닌 비동기식으로만 접근할 수 있으며 오류 처리를 수행할 수 없습니다. 이러한 상황에서는 이 기능을 사용하여 프로그래밍을 용이하게 할 수 있으며, 메서드, 비동기 등과 같은 주요 매개변수는 기본적으로 설정되어 있으며 변경할 수 없습니다. 예시는 다시 소개하지 않겠습니다.

url: 요청 주소를 보냅니다.

data: 전송할 키/값 매개변수입니다.
콜백: 전송 성공 시 콜백 기능입니다.
type: 콘텐츠 형식, xml, html, script, json, text,_default를 반환합니다. .$$

, $.GET과 마찬가지로 이 함수는 get 메소드의 제출 데이터로 캡슐화되어 비동기 새로 고침 방식을 해결하는 데에만 사용할 수 있습니다. 여기서는 더 이상 데모를 하지 않습니다. ㅋㅋ > $. 우리가 설정해야 하는 매개변수는 url, [data], [callback] 세 개뿐입니다. 매우 간단합니다.

실제로 $.ajax 방법을 알고 나면 다른 모든 방법을 사용할 수 있습니다. 실제로는 매우 간단합니다.

그런데 여기에 더 문제가 되는 또 다른 문제가 있습니다. 즉, 페이지의 데이터 양이 상대적으로 많은 경우 어떻게 해야 할까요? 정규 형식을 처리할 때 Struts2 프레임워크를 사용하여 도메인 중심 모드를 통해 자동으로 캡슐화합니다. 그러면 Ajax를 통해 캡슐화하는 방법은 무엇입니까? 여기서 JQuery에는 Jquery Form이라는 플러그인이 있습니다. 이 js 파일을 도입하면 양식 양식을 모방하여 Struts2의 도메인 기반 모드를 지원하고 자동 데이터 캡슐화를 수행할 수 있습니다. 사용법은 $.ajax와 유사합니다. 실제 예를 살펴보겠습니다. 다음은 사용자를 저장하는 프런트 엔드 코드입니다:

"font-size:18px;"> ; $(
함수(){
1. > >
  "조직이 성공적으로 저장되었습니다.")
2. ㅋㅋ ~ ~ ~ - ㅋㅋ . > insertBtn").attr(
3. false) ;
5. $('#orgForm').ajaxForm(options) // Jquery.Form에서 ajaxForm 메서드를 통해 제출
7. < /span>
8. 따라서 데이터 캡슐화 처리를 수행할 필요가 없습니다. 이는 비동기 새로 고침 작업과 같은 Ajax 작업을 크게 단순화합니다. 정리하자면, JQuery에서 ajax 연산을 많이 사용하는 것 같습니다. 여전히 폼 처리와 매우 유사하지만 구현되는 기능이 다릅니다.
10. from
위 내용은 JQuery의 Ajax 캡슐화에 대한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!