Jquery의 Ajax 구문 예제 요약

AJAX - 핵심 XMLHttpRequest 객체 , JQuery는 Ajax 비동기 작업도 캡슐화합니다. 다음은 몇 가지 일반적인 방법입니다. $.post, $.ajax, $.get, $.getJSON.

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

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

data: 전송할 키/값 매개변수입니다.

type: 콘텐츠 형식, xml, html, script, json, text,_default를 반환합니다.

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

async // 여부 비동기 새로 고침 지원, 기본값은 true

데이터 //제출해야 하는 데이터

dataType //유형 xml, String, Json 등 서버에서 반환한 데이터

성공 //요청 성공 후 콜백 함수

오류 //요청 실패 후 콜백 함수

}

$.ajax(configObj);//$.ajax 함수를 통해 호출됩니다.

좋아요, 실제적인 예를 살펴보겠습니다. 비동기 삭제의 예를 살펴보겠습니다.

[javascript]

"font-size:18px; "> 유형:

"POST"

, //제출 방법 URL: $ "$ {PageContext.Request.ContextPath} /org/dodelete.action"

,

// 경로 데이터: {

" : "${org.id}"

ㅋㅋ            성공:

function(결과) { //반환된 데이터는 결과에 따라 처리됩니다.

                                $(

"#tipMsg").text("데이터 삭제 성공적으로 “);

                                                            >ㅋㅋ $.post와 마찬가지로 이 함수는 get 메소드의 제출된 데이터를 캡슐화하며 get 제출된 데이터의 비동기 새로 고침을 해결하는 데만 사용할 수 있습니다. 사용 방법은 위와 유사합니다. 여기서는 더 이상 데모를 하지 않습니다.

                                                        $.getJSON, 이는 추가 캡슐화입니다. 즉, Json의 반환 데이터 유형에서 작동합니다. 우리가 설정해야 하는 매개변수는 url, [data], [callback] 세 개뿐입니다. 매우 간단합니다.

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

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

>

function

() {//실행해야 할 기능을 처리합니다. 전에​

ㅋㅋ ~ "disabled"

,

true) {//성공 후 필요한 콜백 함수 반환​

if ( 결과. 성공 ) {                                          

                            |

나무 = window.parent.treeFrame .tree;

ㅋㅋ ~ ~

                                                                     버튼

                                       ).attr( "비활성화됨", false

);

},

clearForm:

true  

      ~ ~                                      $('#orgForm').ajaxForm (옵션); //Jquery.Form의 ajaxForm 메소드를 통해 제출                   

이렇게 하면 더 이상 데이터를 캡슐화할 필요가 없으므로 Ajax 작업과 비동기 새로 고침 작업이 크게 단순화됩니다. 정리하자면, JQuery에서 ajax 연산을 많이 사용하는 것 같습니다. 여전히 폼 처리와 매우 유사하지만 구현되는 기능이 다릅니다. 프로그래밍을 배우는 것은 실제로 데이터를 전송하고 처리하는 방법, 프론트 데스크에서 데이터를 가져와 해당 처리를 위해 서버로 전송한 다음 해당 디스플레이에 반환하는 방법을 배우는 것입니다. 소프트웨어가 완성되었습니다. 여전히 매우 흥미로운 느낌입니다.