jQuery Ajax 사용법 example_jquery

Jquery는 비동기 제출을 매우 잘 캡슐화합니다. AJAX를 직접 사용하는 것은 매우 번거롭습니다. Jquery는 브라우저의 차이를 고려하지 않고 작업을 크게 단순화합니다.

$.post와 $.get은 간단한 메소드입니다. 복잡한 로직을 처리하려면 jQuery.ajax()를 사용해야 합니다.
1. $.ajax의 일반 형식

$.ajax({
   type: 'POST',
   url: url ,
  data: data ,
  success: success ,
  dataType: dataType
});

2. $.ajax 매개변수 설명

매개변수 설명
URL 필수입니다. 요청을 보내야 하는 URL을 지정합니다.
데이터는 선택 사항입니다. 맵 또는 문자열 값. 요청과 함께 서버로 전송될 데이터를 지정합니다.
성공(데이터, textStatus, jqXHR) 선택사항. 요청이 성공했을 때 실행되는 콜백 함수입니다.
데이터 유형은 선택사항입니다. 예상되는 서버 응답의 데이터 유형을 지정합니다.
지능형 판단은 기본적으로(xml, json, script 또는 html) 수행됩니다.
3. $.ajax에 관해 참고할 사항:

1. 데이터에는 html 스플라이싱, json 배열, dataType으로 지정된 serialize() 형식의 세 가지 주요 방법이 있으며 지능적인 판단은 지정되지 않습니다.

2.$.ajax는 텍스트 모드에서만 양식을 제출합니다. 비동기 제출에 이 포함된 경우 jquery.form.js의 $.ajaxSubmit을 사용해야 합니다.

4. $.ajax의 실제 적용 예시

//1.$.ajax带json数据的异步请求 
var aj = $.ajax( {  
  url:'productManager_reverseUpdate',// 跳转到 action  
  data:{  
       selRollBack : selRollBack,  
       selOperatorsCode : selOperatorsCode,  
       PROVINCECODE : PROVINCECODE,  
       pass2 : pass2  
  },  
  type:'post',  
  cache:false,  
  dataType:'json',  
  success:function(data) {  
    if(data.msg =="true" ){  
      // view("修改成功！");  
      alert("修改成功！");  
      window.location.reload();  
    }else{  
      view(data.msg);  
    }  
   },  
   error : function() {  
     // view("异常！");  
     alert("异常！");  
   }  
}); 
 
 
//2.$.ajax序列化表格内容为字符串的异步请求 
function noTips(){  
  var formParam = $("#form1").serialize();//序列化表格内容为字符串  
  $.ajax({  
    type:'post',    
    url:'Notice_noTipsNotice',  
    data:formParam,  
    cache:false,  
    dataType:'json',  
    success:function(data){  
    }  
  });  
}  
 
 
//3.$.ajax拼接url的异步请求 
var yz=$.ajax({  
   type:'post',  
   url:'validatePwd2_checkPwd2?password2='+password2,  
   data:{},  
   cache:false,  
   dataType:'json',  
   success:function(data){  
     if( data.msg =="false" ) //服务器返回false，就将validatePassword2的值改为pwd2Error，这是异步，需要考虑返回时间  
     {  
        textPassword2.html("<font color='red'>业务密码不正确！</font>");  
        $("#validatePassword2").val("pwd2Error");  
        checkPassword2 = false;  
        return;  
      }  
   },  
   error:function(){}  
});  
 
 
//4.$.ajax拼接data的异步请求 
$.ajax({   
  url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',   
  type:'post',   
  data:'merName='+values,   
  async : false, //默认为true 异步   
  error:function(){   
    alert('error');   
  },   
  success:function(data){   
    $("#"+divs).html(data);   
  } 
});