js jquery ajax의 여러 사용법 요약(및 장점과 단점 소개)_javascript 기술

이 글은 Ajax가 무엇인지 몰랐던 제가 Ajax를 능숙하게 사용하게 된 과정에 관한 것입니다.

먼저 ajax를 사용하는 가장 독창적인 방법

코드를 복사하세요 코드는 다음과 같습니다 :

개인 분석: 이 방법은 꽤 좋습니다. 간단하고 유연하지만, 한 가지 단점은 중복된 코드가 많아 나중에 유지 관리에 도움이 되지 않는다는 것입니다.

2. js 측에 캡슐화된 Ajax 요청

이것은 JavaScript 사용에 익숙한 사람들에게 좋은 선택입니다. 위에서 언급한 메서드를 간단히 캡슐화하고 통합된 호출을 수행합니다. 코드가 꽤 많아서 구글에 ajaxrequest로 검색해보시면 될 것 같습니다.

//ajaxrequest.js에 이 메소드가 있습니다. 이 메소드는 상황에 따라 여러 개의 인터페이스가 있을 수 있습니다. 🎜>
코드 복사

코드는 다음과 같습니다. function ajax_action_fun(url,fun) {var ajax=new AJAXRequest;

ajax.get(

url,
function(obj){alert(obj.responseText);fun()}
);
}

//이 인터페이스를 html로 호출
get_shop_son_list //콜백 이후 실행되는 메소드 이름
ajax_action_fun("../ajax/shop_ajax.php?type=1",get_shop_list);

function get_shop_list(resValue){

//원하는 작업은 다음과 같습니다

}

개인 분석:

첫 번째 방법의 단점을 극복하기 위해 인터페이스를 균일하게 호출하고 콜백 함수를 설정합니다. 단점이 있다면 ajaxrequest 자체에 있는 것이 아니라 자바스크립트에 있습니다 javascript: ajax_action_fun 메소드를 호출하려면 HTML에 뭔가를 추가해야 합니다 showshop

jquery: js와 html을 최대한 분리하는 데 사용할 수 있습니다. 이는 나중에 유지 관리하는 데 매우 유용하며 예를 들어 전체 사이트를 html로 변경하는 등 많은 시간을 절약해 줍니다.

$(".showshop").bind("click", {url: "../ajax/shop_ajax.php?type=1", function:get_shop_list}, ajax_action_fun);

이렇게 하면 됩니다 HTML로 onclick 이벤트를 작성할 필요가 없습니다

셋, jquery ajax

1)

코드 복사

코드는 다음과 같습니다. $.ajax({ type: "POST",

url: "test.php", //php 파일 호출

data: "name=zhang",
성공: function(msg){ //콜백 함수
Alert( "저장된 데이터: " msg); //작업은 다음과 같습니다
}
});


2)
// test.php 파일 호출, 매개변수 전달, data는 반환된 데이터

코드 복사

코드는 다음과 같습니다:$.post("test.php", { name: "zhang"}, function(data){

Alert("Data 로드됨: " data);

});