JQuery 에서 Ajax 의 동작 전체 예

자바 소프트웨어 개발 에서 백 스테이지 에서 우 리 는 각종 프레임 워 크,예 를 들 어 SSH 등 을 통 해 코드 에 대한 패 키 징 을 할 수 있 습 니 다.예 를 들 어 Struts,SpringMVC 는 프론트 에서 action 까지 의 절 차 를 패 키 징 제어 하여 우 리 는 간단 한 배치 만 하면 실현 할 수 있 습 니 다.한편,spring 은 각종 대상 의 관 리 를 밀봉 하여 AOP 프로 그래 밍 방식 을 제공 하여 우 리 를 편리 하 게 했다.한편,hibenate 와 IBatis 는 JDBC 코드 를 패키지 하 는 것 으로 우리 가 매번 반복 되 고 복잡 한 JDBC 코드 를 쓸 필요 가 없다. 
         프론트 데스크 톱 은 페이지 의 일부 효과,검증 등에 대해 우 리 는 모두 자바 스 크 립 트 언어 를 통 해 이 루어 졌 습 니 다.그러나 이것 은 우리 의 자바 코드 처럼 프론트 데스크 톱 언어 가 가장 기본 적 인 것 입 니 다.jQuery 는 js 코드 를 패키지 하여 우리 프론트 코드 의 작성 을 편리 하 게 하 는 것 입 니 다.그리고 아주 큰 장점 은 브 라 우 저의 호환성 문 제 를 해결 하 는 것 입 니 다.이것 도 우리 가 그것 을 사용 하 는 매우 중요 한 원인 중의 하나 이다. 
         현재 사용자 의 수 요 를 만족 시 키 기 위해 Ajax(Asynchronous Javascript+XML)비동기 리 셋 은 비교 할 수 없 는 역할 을 합 니 다.예전 에 Ajax 작업 을 썼 을 때 JDBC 코드 처럼 몇 가지 필수 적 인 절 차 를 밟 아야 합 니 다.
AJAX―핵심 XML HttpRequest 대상,JQuery 도 Ajax 비동기 작업 을 봉인 하 였 습 니 다.여기 서 자주 사용 하 는 몇 가지 방식 을 살 펴 보 겠 습 니 다.$.ajax，$.post， $.get， $.getJSON。 
         1.$.ajax,이것 은 JQuery 가 ajax 에 대한 가장 기본 적 인 단계 입 니 다.이 함 수 를 사용 하면 비동기 통신 의 모든 기능 을 완성 할 수 있 습 니 다.즉,어떤 상황 에서 도 우 리 는 이 방법 을 통 해 비동기 리 셋 작업 을 할 수 있다 는 것 이다.그러나 그것 의 매개 변수 가 비교적 많아 서 때로는 좀 번 거 로 울 수도 있다.자주 사용 하 는 인자 보기:       

var configObj = {
  method //       ：get post
  url //       
  async //        ，   true
  data //       
  dataType //          ，  xml,String,Json 
  success //          
  error //          
 } 

$.ajax(configObj);//$.ajax 함 수 를 통 해 호출 합 니 다. 
           자,실제 예 를 보 세 요.비동기 삭 제 를 하 는 예 를 보 세 요.

<span style="font-size:18px;">   //    
    $.ajax({ 
     type : "POST", //     
     url : "${pageContext.request.contextPath}/org/doDelete.action",//   
     data : { 
      "org.id" : "${org.id}" 
     },//  ，      Json       
     success : function(result) {//                
      if ( result.success ) { 
       $("#tipMsg").text("      "); 
       tree.deleteItem("${org.id}", true); 
      } else { 
       $("#tipMsg").text("      "); 
      } 
     } 
    }); 
</span> 

           2.$.post,이 함 수 는 사실$.ajax 에 대해 진일보 한 패 키 징 을 진행 하여 매개 변 수 를 줄 이 고 조작 을 간소화 하 였 으 나 사용 범 위 는 더욱 작 아 졌 습 니 다.$.post 는 데이터 제출 방식 을 간소화 하여 POST 방식 으로 만 제출 할 수 있 습 니 다.비동기 접근 서버 만 있 을 수 있 고 동기 접근 이 불가능 하 며 오류 처리 가 불가능 합 니 다.이러한 상황 을 만족 시 키 는 상황 에서 우 리 는 이 함 수 를 사용 하여 우리 의 프로 그래 밍 을 편리 하 게 할 수 있 습 니 다.그것 의 주요 몇 가지 매개 변 수 는 method,async 등 기본 설정 을 했 습 니 다.우 리 는 변경 할 수 없습니다.예 는 더 이상 소개 하지 않 는 다.
url:요청 주소 보 내기.
data:Key/value 인 자 를 보 내 려 고 합 니 다.
callback:전송 성공 시 리 셋 함수.
type:내용 형식,xml,html,script,json,text,default。 
        3.$.get,$.post 와 마찬가지 로 이 함 수 는 get 방법의 제출 데 이 터 를 패키지 하 는 것 입 니 다.get 제출 데이터 로 비동기 리 셋 을 해결 하 는 방식 에 만 사용 할 수 있 습 니 다.사용 방식 과 위의 것 도 많 지 않 습 니 다.여 기 는 더 이상 시범 을 보이 지 않 는 다. 
        4.$.getJSON,이것 은 더 나 은 패키지 입 니 다.즉,되 돌아 오 는 데이터 형식 을 JSon 으로 조작 하 는 것 입 니 다.안에 세 개의 인자 가 있 습 니 다.설정 이 필요 합 니 다.아주 간단 합 니 다.url,[data],[callback]. 
        사실$.ajax 방법 을 알 게 되 었 습 니 다.다른 것 은 모두 사용 할 수 있 습 니 다.모두 똑 같 습 니 다.사실은 매우 간단 합 니 다. 
        그러나 여기 서 또 하나의 문제 가 있 습 니 다.귀 찮 은 것 은 페이지 의 데이터 양 이 비교적 많 으 면 어떻게 해 야 합 니까?일반적인 폼 처리 에서 우 리 는 프레임 워 크 Struts 2 를 사용 하여 도 메 인 구동 모드 를 통 해 자동 으로 패 키 징 을 가 져 올 수 있 습 니 다.그러면 ajax 를 통 해 어떻게 패 키 징 을 합 니까?여기 JQuery 에는 Jquery Form 이라는 플러그 인 이 있 습 니 다.이 js 파일 을 도입 하면 폼 Form 을 모방 하여 Struts 2 의 도 메 인 드라이브 모드 를 지원 하고 자동 데이터 패 키 징 을 할 수 있 습 니 다.사용법 은$.ajax 와 유사 합 니 다.실제 예 를 보 세 요.사용자 의 프론트 코드 를 저장 합 니 다. 

<span style="font-size:18px;"> $(function(){ 
  var options = { 
   beforeSubmit : function() {//           
    $("tipMsg").text("      ，   ..."); 
    $("#insertBtn").attr("disabled", true); 
   }, 
   success : function(result) {//              
    if ( result.success ) { 
     $("#tipMsg").text("      "); 
          //         ，      ， 
     //       ，       
     var tree = window.parent.treeFrame.tree; 
     tree.insertNewChild("${org.id}", result.id, result.name); 
    } else { 
     $("#tipMsg").text("      "); 
    } 
    //        
    $("#insertBtn").attr("disabled", false); 
   }, 
   clearForm : true 
  }; 
  $('#orgForm').ajaxForm(options); //  Jquery.Form  ajaxForm       
 }); 
</span> 

       이렇게 하면 우 리 는 더 이상 데이터 data 의 패 키 징 처 리 를 하지 않 고 ajax 의 조작 을 크게 간소화 하여 비동기 리 셋 작업 을 할 수 있 습 니 다.JQuery 에서 ajax 의 조작 을 종합해 보면 많이 사용 한 것 같 습 니 다.form 폼 의 처리 와 매우 비슷 합 니 다.이 루어 진 기능 이 다 를 뿐 입 니 다.프로 그래 밍 을 배 우 는 것 은 바로 데이터 의 유통 처 리 를 배 우 는 것 이다.프론트 데스크 에서 어떻게 얻 고 서버 로 전송 하여 해당 하 는 처 리 를 한 다음 에 돌아 와 관련 된 디 스 플레이 를 하 는 것 이다.이 절 차 를 일부 기술 로 실현 하면 소프트웨어 의 개발 을 완 성 했 고 매우 재 미 있 었 다. 
     더 많은 JQuery 학습 은 api 문 서 를 조회 하여 완성 해 야 합 니 다.http://hemin.cn/jq/
위 에서 말씀 드 린 것 은 편집장 님 께 서 소개 해 주신 JQuery 에서 Ajax 의 조작 전체 예 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!