WEB/JS

[jQuery] 제이쿼리를 이용한 ajax 사용

인생시계 2020. 11. 28. 18:56

[jQuery] 제이쿼리를 이용한 ajax 사용

 

<script>

 

 function do_ajax(){

  

  //폼에 입력되어 있는  데이터를 name1=value1&name2= value2 형태로 변경 함

  var fmData = $("form:[name='formName']").serialize(); 

 

  $.ajax({

     url : "sub02.jsp"

   , type : "GET"  //{GET or POST}

   , data : {"data" : fmData  }

   ,  success : function(data){             //통신이 성공했을 때

          $("#layeout").html(data);

       }

   ,  beforeSend : function(){           //통신을 하기전

           console.log("잠시만 기다려주세요.");

       }

   ,  complete : function(){           //통신이 완료했을 때

           console.log("완료!");

       }

  ,  error : function(xhr, status){               //통신이 실패했을 때

           console.log(status + " : " + xhr);

     }

  });

 }

 

</script>

 

 

<article id="layeout">

    <div>
        <button onclick="do_ajax()">연습</button>
    </div>

</article >