Spring 실습
Spring 실습 12일차(ajax방식)
choco2706
2024. 5. 8. 18:46
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화 되서 넘어가게 된다.
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개 업로드 된다고 가정했다.