ajax로 Post 데이터 받기 - Formdata , serialize

 

 

let index = {



init: function(){
         $("#btn-save").on("click", ()=>{
            this.save();
         });
},

save: function(){
    let data = $("#postSave").serialize();


$.ajax({
    type: "POST",
    data: data,
    url: "/api/post/save",
    contentType: "application/x-www-form-urlencoded; charset=utf-8",
    dataType: "json"

    }).done( res => {
    console.log(res,"성공");
    alert(res,"저장 성공");

    }).fail(error =>{
    console.log(error,"실패");
    alert(error,"저장 실패");
    });

}


}

index.init();

 평범하게 serialize 사용한경우,

 

  이때 file 날리면 dto로 받을때 file부분은 그냥 null 처리됨

 

 

 

  <form method="post" id="postSave" enctype="multipart/form-data" >

   <div class="container">

         <div class="form-group">
           <label for="title">Title</label>
           <input type="text" class="form-control" name="title" placeholder="Enter title" id="title">
         </div>

        <div class="form-group">
          <label for="content">content</label>
          <textarea class="form-control summernote" name="content" rows="5" id="content"></textarea>
        </div>

        <div class="form-group">
           <label for="content">entrytitle : 소제목 </label>
           <input type="text" class="form-control" name="entryTitle" placeholder="Enter title" id="entryTitle">
         </div>

       <div class="form-group">
             <label for="content">entryContent : 소본문 </label>
             <textarea class="form-control summernote" name="entryContent" rows="1" id="entryContent"></textarea>
           </div>

        <div class="form-group">
           <label for="content">actor : 배우 </label>
           <input type="text" class="form-control" name="actor" placeholder="Enter title" id="actor">
         </div>


       <div class="form-group">
         <label for="content">job : 직업 </label>
         <input type="text" class="form-control" name="job" placeholder="Enter title" id="job">
       </div>

     <div class="form-group">
           <label for="content">height : 키 </label>
           <input type="text" class="form-control" name="height" placeholder="Enter title" id="height">
         </div>

     <div class="form-group">
         <label for="content">weight : 몸무게 </label>
         <input type="text" class="form-control" name="weight" placeholder="Enter title" id="weight">
       </div>

       <div class="form-group">
     <label for="content">actorImage : 소본문(배우or드라마 사진) </label>
     <input type="file" class="form-control" name="actorImage" id="actorImage">
   </div>

                     <div class="form-group">
                     <label for="content">clotheImage : 소본문(옷 사진) </label>
                     <input type="file" class="form-control" name="clotheImage" id="clotheImage">
                   </div>

                      <div class="form-group">
                 <label for="content">video : 영상 </label>
                 <input type="file" class="form-control" name="video" id="video">
               </div>


       <input type="button" value="확인" onclick="postSave()">
       </form>



</div>

 

 

formdata 사용시

function postSave(){

  
          let data = $("#postSave")[0];

          let formData = new FormData(data);

      $.ajax({
          type: "POST",
          data: formData,
          url: `/api/post/save/${userId}`,
          contentType:false,
          processData:false,
          enctype:"multipart/form-data",
          dataType: "json"

          }).done( res => {
          console.log(res,"성공");
          alert(res,"저장 성공");

          }).fail(error =>{
          console.log(error,"실패");
          alert(error,"저장 실패");
          });

      }

data를 굳이 serialize 하지말고

 data 변수에 form을 그냥 배열로 담은다음에

Formdata에 넣으면된다.

 

form 태그에서 꼭 Post 해주고 (안하면 고생함)

Controller ResponseEntity도 잊지말아야함

 

 

폼은 put, delete 요청을 할 수 없다


ajax로 통신 요청을 하려면
1. URL을 설정하고
2. Method : POSt, PUT, DELTE, GET 을 설정하고
3. 전송할 데이터가 있다면 보내고 (POST, PUT)
4. 전송할 데이터가 없다면 URL만 적습니다. (GET, DELETE)
5. 그리고 ajax 통신이 실행됩니다.
6. 실행되면 이벤트 루프에 ajax 통신 이벤트가 등로되고
7. 등록된 이벤트가 실행됩니다.
8. 통신이기 때문에 CPU의 쓰레드가 아닌, 메모리가 일을 합니다. (이때는 스프링 서버 컨트롤러가 일을하고 일이 끝나면 응답이 됩니다)
9. 메모리에서 통신에 대한 응답 response가 오면 CPU의 쓰레드는 그 요청을 콜백받습니다.
10. 콜백을 받는 부분은 ajax().done().fail() 중에 done이나 fail의 인수로 전달됩니다.
11. 성공하면 done(), 실행하면 fail 입니다.

 

 

 

 

    function sendData(){
      
      var data ={};
      data.email = $('#email').val();
      data.phone = $('#phone').val();
      
      var jsonStr = JSON.stringfy(data);
      
      	$.ajax({
        type : 'post',
        url : url,
        data : jsonStr,
        contentType : "application/json; charset=utf-8",
        error : onError,
        success : onSuccess
	  });
  }

 

 

$.ajax({
    url : 주소,
    method : "get" or "post",
    data : data,
    error : function(error) {
        alert("Error!");
    },
    success : function(data) {
        alert("success!");
    },
    complete : function() {
        alert("complete!");    
    }
});