Spring 실습 12일차(ajax방식)

1, 2

<h2>ajaxhome.jsp</h2>
<hr />
<form>
	<p><input type="text" id="boardNo" name="boardNo"></p>
	<p><input type="text" id="title" name="title"></p>
	<p>
		<textarea rows="3" cols="30" id="content" name="content"></textarea>
	</p>
	<p><input type="text" id="userId" name="userId"></p>
	<p><input type="password" id="password" name="password"></p>
	<p><input type="text" id="writer" name="writer"></p>
	<p><button type="button" id="putBtn">비동기 전송</button></p>
	<p><button type="button" id="registerBtn01">경로 변수</button></p>
	<p><button type="button" id="registerBtn01">경로 변수2</button></p>
</form>

 

<script>
$(function(){
	/*
	   요청URI : /register/hongkd
	  pathVariable : hongkd
	   요청방식 : get
	*/
	$('#registerBtn01').on('click', function(){
		$.get("/register/hongkd", function(result){
			console.log("result : ", result)
			if(result == "SUCCESS"){
				alert("SUCCESS")
			};
		});
	});
    
    /*
      요청URI : /register2/hongkd/pw01
      pathVariable : hongkd, pw01
      요청방식 : post
      */
    $('#registerBtn02').on('click', function(){
		let userId = $('#userId').val();
		let password = $('#password').val();
		
		let userObj = {
			"userId":userId,
			"password":password
		};
			
		$.ajax({
			url:"/register2/hongkd/pw01",
			contentType:"application/json;charset=utf-8",
			data:JSON.stringify(userObj),
			type:"post",
			success:function(result){
				console.log("result : ", result)
				if(result == "SUCCESS"){
					alert("SUCCESS")
				}
			};
		});
	});
    
</script>

 

registerBtn01이란 id값을 가진 요소를 클릭했을 때 get방식으로 데이터를 보낸다.

registerBtn02이란 id값을 가진 요소를 클릭했을 때 post방식으로 ajax를 통해 데이터를 보낸다.

 

MemberController에서 매핑되도록 성정해준다.

 

/*
요청URI : /register/hongkd
pathVariable : hongkd
요청방식 : get
*/
@ResponseBody
@GetMapping("/register2/{userId}")
public String register02(@PathVariable("userId") String userId) {
   log.info("userId : " + userId);

   return "SUCCESS";
}

/*
요청URI : /register2/hongkd/pw01
pathVariable : hongkd, pw01
요청방식 : post
*/
@ResponseBody
@PostMapping("/register2/{userId}/{password}")
public String register02(@PathVariable("userId") String userId,
						@PathVariable("password") String password) {
    log.info("userId : " + userId);
    log.info("password : " + password);

    return "SUCCESS";
}

 

3. 자바빈 타입(★ Best )

$('#registerBtn03').on('click', function(){
		let userId = $('#userId').val();
		let password = $('#password').val();
		
		let userObj = {
			"userId":userId,
			"password":password
		};
		
		$.ajax({
			url:"/register3",
			contentType:"application/json;charset=utf-8",
			data:JSON.stringify(userObj),
			type:"post",
			success:function(result){
				console.log("result : ", result)
				if(result == "SUCCESS"){
					alert("SUCCESS")
				}
			}
		});
	});

 

registerBtn03이란 id값을 가진 요소를 클릭했을 때 post방식으로 ajax를 통해 데이터를 보내는데 받아주는 방식이 다르다.

 /*
	   요청URI : /register03
	   요청파라미터 : {userId:a001,password:java}
	   요청방식 : post
   */
   @ResponseBody
   @PostMapping("/register3")
   public String register03(@RequestBody Member member) {
	   log.info("member : " + member);
	   log.info("userId : " + member.getUserId());
	   log.info("password : " + member.getPassword());
	   
	   return "SUCCESS";
   }

 

member에 담아주기 위해서는 @RequestBody를 작성해주어야 한다.

 

실행 결과

 

 

4. 문자열 매개변수 - 1

/*
	    요청URI : /register04
	    요청파라미터(JSON->String) : {userId:a001,password:java}
	    요청방식 : post
    */
	$('#registerBtn04').on('click', function(){
		let userId = $('#userId').val();
		let password = $('#password').val();
		
		let userObj = {
			"userId":userId,
			"password":password
		};
		
		$.ajax({
			url:"/register4",
			contentType:"application/json;charset=utf-8",
			data:JSON.stringify(userObj),
			type:"post",
			success:function(result){
				console.log("result : ", result)
				if(result == "FAILED"){
					alert("FAILED")
				}
			}
		});
	})

/*
	   요청URI : /register04
	   요청파라미터(JSON->String) : {userId:a001,password:java}
	   요청방식 : post
	*/
   @ResponseBody
   @PostMapping("/register4")
   public String register04(String userId, String password) {
	   log.info("userId : " + userId);
	   log.info("password : " + password);
	   
	   return "FAILED";
   }

실행 결과

 

데이터를 입력했으나 받아오지 못하고있음.

이럴 경우 받아오는 방법이 별개로 있다.

url:"/register4?userId" + userObj.userId + "&password="+userObj.password,

 

url부분을 위와 같이 수정해줘야 한다.

수정 후 결과

 

5. 문자열 매개변수 - 2

위 방법 말고 다른 방법도 있다고 한다.

$.ajax({
        url:"/register0501",
        data:userObj,
        type:"post",
        success:function(result){
            console.log("result : ", result)
            if(result == "SUCCESS"){
                alert("SUCCESS")
            }
        }
    });

 

위 방법에서 ContentType을 지우고, data에 JSON.stringify를 빼주니 받아올 수 있게 되었다.

(Controller는4번과 동일, Mapping만 수정)

처리 결과

 

 

6. @PathVariable, @RequestBody 동시에 처리

$('#registerBtn06').on('click', function(){
    let userId = $('#userId').val();
    let password = $('#password').val();

    let userObj = {
        "userId":userId,
        "password":password
    };

    $.ajax({
        url:"/register6/hongkd",
        contentType:"application/json;charset=utf-8",
        data:JSON.stringify(userObj),
        type:"post",
        success:function(result){
            cnosole.log("result : ", result)
            if(result == "SUCCESS"){
                alert("SUCCESS")
            }
        }
    });
});

 

@ResponseBody
@PostMapping("/register06/{userId}")
public String register06(@PathVariable String userId, @RequestBody Member member) {
   log.info("userId : " + userId);
   log.info("userId : " + member.getUserId());
   log.info("password : " + member.getPassword());

   return "SUCCESS";
}

 

@PathvValiable : 파람으로 받은 userId

@RequestBody : data로 전달받은 것들

결과

 

7. List

리스트에 담긴 데이터를 받아와보자

$('#registerBtn07').on('click', function(){
    // 대괄호[] = Array, 중괄호{} = Object 
    let userObjArray = [
        {"userId":"name01","password":"pw01"},
        {"userId":"name02","password":"pw02"}
    ];

    $.ajax({
        url:"/register07",
        contentType:"application/json;charset=utf-8",
        data:JSON.stringify(userObjArray),
        type:"post",
        dataType:"text"
        success:function(result){
            console.log("result : ", result)
            if(result == "SUCCESS"){
                alert("SUCCESS")
            }
        }
    });
});

@ResponseBody
@PostMapping("/register07")
public String register07(@RequestBody List<Member> memberList) {
   for (Member member : memberList) {
       log.info("member : " + member);
   }

   return "SUCCESS";
}

실행 결과

 

 

8. 중첩된 자바빈 - 1

$('#registerBtn08').on('click', function(){
    let userId = $('#userId').val();
    let password = $('#password').val();

    let userObj = {
        "userId":userId,
        "password":password,
        // 중첩된 자바빈
        "address":{
            "postCode":"12345",
            "location":"대전 중구 대흥동 3"
        }
    };

    $.ajax({
        url:"/register08",
        contentType:"application/json;charset=utf-8",
        data:JSON.stringify(userObjArray),
        type:"post",
        success:function(result){
            console.log("result : ", result)
            if(result == "SUCCESS"){
                alert("SUCCESS")
            }
        }
    });
});

@ResponseBody
@PostMapping("/register08")
public String register08(@RequestBody Member member) {
   log.info("userId : " + member.getUserId());
   log.info("password : " + member.getPassword());

   Address address = member.getAddress();
   if(address != null) {
       log.info("postCode : " + address.getPostCode());
       log.info("location : " + address.getLocation());
   }

   return "SUCCESS";
}

 

member객체에서 address를 뽑아내 address객체에 집어넣어놓고

null값이 아닐 때 if문을 타며 log가 띄워진다.

결과

 

9. 중첩된 자바빈(List)

중첩된 자바빈의 타입이 List일 때

$('#registerBtn09').on('click', function(){

    let userId = $('#userId').val();
    let password = $('#password').val();

    let userObj = {
        "userId":userId,
        "password":password,
        // 중첩된 자바빈
        "address":{
            "postCode":"12345",
            "location":"대전 중구 대흥동 3"
        },
        "cardList":{
            {"no":"12345","validMonth":"24/05"},
            {"no":"54321","validMonth":"25/04"}
        }
    };

    $.ajax({
        url:"/register09",
        contentType:"application/json;charset=utf-8",
        data:JSON.stringify(userObj),
        type:"post",
        success:function(result){
            console.log("result : ", result)
            if(result == "SUCCESS"){
                alert("SUCCESS")
            }
        }
    });
});

@ResponseBody
@PostMapping("/register09")
public String register09(@RequestBody Member member) {
   log.info("userId : " + member.getUserId());
   log.info("password : " + member.getPassword());

   Address address = member.getAddress();
   if(address != null) {
       log.info("postCode : " + address.getPostCode());
       log.info("location : " + address.getLocation());
   }

   List<Card> cardList = member.getCardList();
   if(cardList != null) {
       for (Card card : cardList) {
           log.info("no : " + card.getNo());
           log.info("validMonth : " + card.getValidMonth());
       }
   }

   return "SUCCESS";
}

 

10. 파일 업로드

<p><input type="file" id="registerBtn08" id="inputFile"/>파일 업로드</p>

// 파일 업로드 AJAX 방식
$('#inputFile').on('change', function(event){
    console.log("change!");
    let userId = $('#userId').val();
    let password = $('#password').val();

    let files = event.target.files;
    let file = files[0];
    console.log("file : ",file)

    let formData = new FormData();

    // append : 부모의 마지막 자식 요소를 추가
    formData.append("userId", userId)
    formData.append("password", password)
    formData.append("file", file)

    $.ajax({
        url:"/uploadAjax",
        contentType:false,
        // 파일 업로드할때 사용해야한다.
        processData:false,
        data:formData,
        // 파일 업로드 할때는 post방식
        type:"post",
        dataType:"json",
        success:function(data){
            console.log("data : " + data);
            alert(data);
        }
    });
});

@ResponseBody
@PostMapping("/uploadAjax")
public Map<String, Object> uploadAjax(String userId, String password, MultipartFile file) {
   String fileName = file.getOriginalFilename();
   log.info("userId : " + userId);
   log.info("password : " + password);
   log.info("fileName : " + fileName);

   Map<String, Object> map = new HashMap<String, Object>();
   map.put("userId", userId);
   map.put("password", password);
   map.put("fileName", fileName);

   return map;
}

 

map이 json string으로 serialize화 되서 넘어가게 된다.

serialize화 되서 넘어오기 때문에 object로 출력된다.

결과

 

 

11. lprod / create

lprod / create.jsp에서 위 작업을 복습한다.

 $("#btnSubmit").on("click",function(){
  let lprodId = $("input[name='lprodId']").val();
  let lprodGu = $("input[name='lprodGu']").val();
  let lprodNm = $("input[name='lprodNm']").val();

  let formData = new FormData;

  formData.append("lprodId",lprodId);
  formData.append("lprodGu",lprodGu);
  formData.append("lprodNm",lprodNm);

  let fileObj = $('#pictures');

  let files = fileObj[0].files;
  console.log("files.length : ",files.length);

  for(let i = 0; i<files.length; i++){
      formData.append("pictures", files[i])
  }
  /*
  <form>
     <input type="text" name="lprodId"..
     <input type="text" name="lprodGu"..
     <input type="text" name="lprodNm"..
     <input type="file" name="pictures"..
     <input type="file" name="pictures"..
     <input type="file" name="pictures"..
  </form>
  */
  $('.pArea').each(function(idx, data){
      let productId = $(this).children().eq(0).value;
      let pname = $(this).children().eq(1).value;
      let unitPrice = $(this).children().eq(2).value;

      formData.append("productVOList[" + idx + "].productId", productId);
      formData.append("productVOList[" + idx + "].pname", pname);
      formData.append("productVOList[" + idx + "].unitPrice", unitPrice);
  });
  /*
      <input type="text" name="productVOList[0].productId" value="P5211" />
      <input type="text" name="productVOList[0].pname" value="라면" />
      <input type="text" name="productVOList[0].unitPrice" value="111" />
      <input type="text" name="productVOList[1].productId" value="P5212" />
      <input type="text" name="productVOList[1].pname" value="떡볶이" />
      <input type="text" name="productVOList[1].unitPrice" value="222" />
       </form>
   */
   $.ajax({
       url:"/lprod/createFormData",
       processData:false,
       contentType:false,
       data:formData,
       type:"post",
       success:function(result){
           console.log("result : ",result);

       }
   });
});

 

<form action="/lprod/create" method="post" enctype="multipart/form-data">
   <p> 상품분류 아이디 : <input type="number" name="lprodId" placeholder="상품분류 아이디(ex.14)"> </p>
   <p> 
   		상품분류 코드 : <input type="text" name="lprodGu" required placeholder="상품분류 코드(ex.P501)">
   		<button type="button" class="btn btn-primary btn-xs col-sm-1">상품코드 자동생성</button>
   </p>
   <p> 상품분류 명 : <input type="text" name="lprodNm" placeholder="상품분류 명(ex. 분식류)"> </p>
   <hr />
   <p>
      <input type="file" name="pictures" id="pictures" multiple />
   </p>
   <p id="pFunc">
      <button type="button" class="btn btn-info btn-sm col-sm-1" id="btnPlus" >+</button>
      <button type="button" class="btn btn-danger btn-sm col-sm-1" id="btnMinus" >-</button>
    </p>
    <!-- 
      1) + : 영역이 하나 생김
      2) = : 마지막 영역 삭제
     -->
    <p class="pArea">
      <input type="text" name="productVOList[0].productId" id="productId0" class="form-control col-sm-3 float-left" placeholder="상품아이디">
      <input type="text" name="productVOList[0].pname" 	   id="pname0" class="form-control col-sm-3 float-left" placeholder="상품명">
      <input type="text" name="productVOList[0].unitPrice" id="unitPrice0" class="form-control col-sm-3 float-left" placeholder="가격">
    </p>
    <p style="clear: both;"></p>
    <p>
       <input type="button" id="btnSubmit" value="등록">
    </p>
</form>

위 스크립트 코드는 파일이 3개 업로드 된다고 가정했다.