[JS] 비동기 처리 ajax 구문 사용법

 

$.ajax() 메소드는 HTTP 요청을 만드는 강력하고도 직관적인 방법을 제공하여

데이터처리가 비동기로 이루어지며, 페이지의 이동없이, 데이터처리가 완료됨과 동시에 해당페이지에서 변경이 된다.

 

배우기 : http://tcpschool.com/ajax/ajax_jquery_ajax

코딩교육 티씨피스쿨

 

 

기본 구문

$.ajax({

    url: "",

    type: "",

    cache: ,

    dataType: "",

    data: "",

    success: function(data){

      },

    error: function (request, status, error){        

    }

  });

 

• url : 요청 url을 의미한다.
• type : 데이터 전송방식. GET 또는 POST
• cache : 요청 페이지의 캐시 여부. false 또는 true
• datatype : 서버에서 받아올 데이터를 어떤 형태로 해석할 것인지. xml, json, html, script를 선택할 수 있다.
• data : 서버로 데이터를 전송할 때 사용한다. "name="+name 이런 형태로
• success : Ajax 통신에 성공했을 때 실행되는 이벤트.
• error : Ajax 통신에 실패했을 때 실행되는 이벤트. request, status, error로 에러 정보를 확인할 수 있다.

활용 예제

MVC 모델 활용 예제를 보자

1. List.jsp

<div style="float: right">
   <button type="button" class="btn btn-outline-secondary" id="btn_proc" onclick=""></button> 
</div>
      
<div class="form-group">   
  <label for="type" class="col-md-1 control-label">분류</label>
     <div class="col-md-11">
       <input type='text' class="form-control input-md" name='b_type' id='b_type' value='' required="required" style='width: 45%;'>
     </div>
</div>  
      
<div class="form-group">   
  <label for="title" class="col-md-1 control-label">제목</label>
     <div class="col-md-11">
       <input type='text' class="form-control input-md" name='b_title' id='b_title' value='' required="required" style='width: 45%;'>
     </div>
</div>     
    
<div class="form-group">   
  <label for="content" class="col-md-1 control-label">내용</label>
     <div class="col-md-11">
       <textarea class="form-control input-md" name='b_content' id='b_content' rows='10'></textarea>
     </div>
</div> 
 
<div class="form-group">   
  <label for="file1MF" class="col-md-1 control-label">작성자</label>
     <div class="col-md-11">
        <input type="text" class="form-control input-md" name='b_user' id='b_user' value="" size='40' style='width: 25%;'>         
     </div>
</div>

function update_proc(){  
  $.ajax({
    url: "./update_proc.jsp",
    type: "POST",
    cache: false,
    dataType: "json",
    data: $('#frm').serialize(),
    success: function(data){      
      var str = '';
      var msgs = data.msgs; 
      for (var i=0; i < msgs.length; i++) {
        str += msgs[i];
      }
      alert(str);
      list();  // 목록 새로 고침
      init();  // 글쓰기 버튼으로 새로 고침   
    },   
    
    error: function (request, status, error){  
      var msg = "ERROR<br><br>"
      msg += request.status + "<br>" + request.responseText + "<br>" + error;
      console.log(msg);                    
    }
  });
}