Mintaka's log
[SpringBoot] ajax로 간단한 값 주고 받기 본문
1. 일단 ajax가 동작 하는지 확인하기!
하단과 같이 jsp 파일에 js 코드를 넣어주고
function datePlus(){
console.log("왜 안나와");
$.ajax({
type : 'GET',
url : '/HospitalMainDatePlus',
success : function(){
console.log("성공");
},
error : function(){
console.log("실패..");
},
complete : function(){
console.log("완료");
},
beforeSend : function(){
console.log("이제 보낼거다..")
}
});
}컨트롤러에서 다음과 같이 받아줄 경우 콘솔에서 성공을 확인 할 수 있음!
@RequestMapping("/HospitalMainDatePlus")
@ResponseBody
public String datePlus() {
return "끝";
}
2. 그럼 이제 해당 화면에서 ajax를 이용해서 값 바꿔주기!
2-1. 그 전에 js에서 보낸 값이 컨트롤러에서 받아지는지부터 확인.
input 태그를 hidden으로 숨겨놓은 값을 id로 받아와서 value값을 ajax로 컨트롤러에 보냄.
function datePlus(){
console.log("왜 안나와");
var value = $('#datehidden').val();
console.log(value);
$.ajax({
type : 'GET',
url : '/HospitalMainDatePlus',
data : value,
success : function(){
console.log("성공");
},
error : function(){
console.log("실패..");
},
complete : function(){
console.log("완료");
},
beforeSend : function(){
console.log("이제 보낼거다..")
}
});
}-> 컨트롤러에서 String으로 받아오려고 했더니 안됨.
---> 컨트롤러에서 파라미터를 받아오는 것 이외에도 HttpServletResponse를 파라미터로 넣어주어야 함
---> 보낼때도 위의 js코드처럼 value만 딸랑 보내는게 아니라, 이름지어서 보내주어야 함.
다음과 같이 하면 됨!
function datePlus(){
console.log("왜 안나와");
var value = $('#datehidden').val();
console.log(value);
$.ajax({
type : 'GET',
url : '/HospitalMainDatePlus',
data : {hiddendate : value},
success : function(){
console.log("성공");
},
error : function(){
console.log("실패..");
},
complete : function(){
console.log("완료");
},
beforeSend : function(){
console.log("이제 보낼거다..")
}
});
}@RequestMapping("/HospitalMainDatePlus")
@ResponseBody
public String datePlus(HttpServletResponse response, @RequestParam String hiddendate) {
System.out.println(hiddendate);
return "끝";
}
2-2. ajax로 보낸 값을 컨트롤러에서 처리해서 html 코드의 원하는 부분 고쳐주기
- '이후' 버튼 클릭시 datehidden에 저장되어 있던 오늘의 날짜가 ajax를 통해 컨트롤러로 전달됨
- 컨트롤러에서 내일의 날짜를 x월 x일 형태로 변경, string 형태로 다시 ajax로 이동해 ddate를 변경.
function datePlus(){
console.log("왜 안나와");
var value = $('#datehidden').val();
//숫자로 변환후 1 더해주기
value = Number(value)+1;
console.log(value);
$.ajax({
type : 'GET',
url : '/HospitalMainDatePlus',
data : {hiddendate : value},
success : function(data){
console.log("성공");
console.log(data);
$('#ddate').text(data);
$('#datehidden').val(value);
},
error : function(){
console.log("실패..");
},
complete : function(){
console.log("완료");
},
beforeSend : function(){
console.log("이제 보낼거다..")
}
});
}
</script>
</head>
<body>
<h1>병원관리자 메인 페이지</h1>
<div class="container">
<h3>일일 예약 관리</h3>
<button onclick = "dateMinus()">이전</button>
<div id = "ddate">${currentDate }</div>
<button onclick = "datePlus()">이후</button>
<!-- 오늘 기준으로 며칠 증가되었는지 나타내기 위함 -->
<input type="hidden" id="datehidden" value="0" />@RequestMapping("/HospitalMainDatePlus")
@ResponseBody
public String datePlus(HttpServletResponse response, @RequestParam int hiddendate) {
LocalDateTime now = LocalDateTime.now().plusDays(hiddendate);
DateTimeFormatter df = DateTimeFormatter.ofPattern("M월 d일");
String nowString = now.format(df);
return nowString;
}'etc...' 카테고리의 다른 글
| JSON, 파싱 (0) | 2022.12.02 |
|---|---|
| [Spring boot] ajax로 json 데이터 받기 (html, jsp 사용) (0) | 2022.12.01 |
| [Github] push시 non-fast-forward 에러 (0) | 2022.11.23 |
| [Spring] .properties에 있는값 jsp와 java로 가져오기 (0) | 2022.11.17 |
| [DB]다른 AWS RDS에서 내 AWS RDS로 스키마 옮기기 (0) | 2022.11.17 |
'etc...' Related Articles
more
