반응형
SPRING BOOT를 이용한 게시판을 만드는 중에 AJAX를 이용한 비밀번호 변경 기능 구현중 Request method 'POST' not supported가 발생하였다. 내가 격은 바로 이 에러가 발생하는 경우는 크게 3가지이다.
1. controller에서 @ResponseBody, @RequestBody 미설정
2. JSP 파일내에 AJAX 데이터 및 형식 변환의 실수
3 controller에서 parameta 변수의 미일치
하지만 이번에는 완전히 다른 곳에서 오류가 발생했다. 결국 2시간 동안 삽질을 했다.
결국 찾아낸 결과는 button의 타입을 설정해 주지 않아서 그런것이였다. form 내에 있는 버튼은 눌렀을 시 자동으로 submit 하는 기능이 있기 때문에 따로 타입을 설정해 주지 않으면 클릭 시 submit이 되어 contrller로 넘어가는 것이다. 그래서 계속 이러한 오류가 떴던 것이다. 아래와 같이 수정해주니 오류는 발생하지 않았다.
<button class="userInfUp" id="userInfUp">수정</button>
<button type= "button" class="userInfUp" id="userInfUp">수정</button>
userInf.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function() {
//비밀번호 확인 버튼 클릭 시
// 수정버튼 클릭 시
$("#userInfUp").click(function() {
if ($("#userPw").val() == "" || $("#userPwCk").val() == "") {
alert("비밀번호를 입력해 주세요.");
return false;
} else if ($("#userPw").val() != $("#userPwCk").val()) {
alert("비밀번호가 일치하지 않습니다.");
return false;
} else {
let data = {
userId : "${user.userId}",
userPw : $("#userPw").val()
}
$.ajax({
type : "POST",
url : "/user/userInfUp.do",
data : JSON.stringify(data), //httpbody 데이타
contentType : "application/json; charset=utf-8", //
dataType : "json" //response 데이터 타입 json 데이터가 넘어온다면 -> javascript Object로 변경
}).done(function(resp){
if(resp == 1){
alert("비밀번호 수정 완료")
document.location.href = "main"
}
else if(resp == 2){
alert("비밀번호는 숫자, 문자, 특수문자 포함 8~15자리 이내여야 합니다.")
}
else {
alert("오류 발생")
}
}).fail(function(e){
alert("오류 발생")
})
}
});
});
</script>
</head>
<body>
<form id="userInfForm" method="post" action="">
<table style="padding-top: 50px" align=center width=700px border=0
cellpadding=2>
<tr>
<td height=20 align=center bgcolor=#ccc><font color=white>
${postInf.postTp}</font></td>
</tr>
<tr>
<td bgcolor=white>
<table class="table2">
<tr>
<td>작성글 수</td>
<td><input type="text" value="${postTotalNm}" size=5
disabled></td>
<td>추천수</td>
<td><input type="text" value="${postTotalRc}" size=5
disabled></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" value="${user.userNm}" size=40
disabled></td>
</tr>
<tr>
<td>ID</td>
<td><input type="text" value="${user.userId}" size=40
disabled></td>
</tr>
<tr>
<td>PW</td>
<td><input type="password" class="form-control" id="userPw"
name="userPw" placeholder=""
onkeydown="javascript:if(event.keyCode == 13) {login();}"></td>
</tr>
<tr>
<td>PW확인</td>
<td><input type="password" class="form-control"
id="userPwCk" name="userPwCk" placeholder=""
onkeydown="javascript:if(event.keyCode == 13) {login();}" /></td>
</tr>
</table>
</td>
</tr>
</table>
<div class="postWrite">
<button type= "button" class="userInfUp" id="userInfUp">수정</button>
</div>
</form>
</body>
BoardController.java
@PostMapping(value = "/userInfUp.do") // 사용자 정보 수정
@ResponseBody // 이걸 해야 리턴 줄 수 있다. @RequestBody이걸해야 받아온다.
public int userInfUp(@RequestBody UserVO userVO, Model model, HttpSession session) throws Exception {
logger.info("정보 업데이트");
/*
* logger.info(userVO.getUserId()); logger.info(userVO.getUserPw());
*/
String PwPattern = "^.*(?=^.{8,15}$)(?=.*\\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$";
String userPw = userVO.getUserPw();
if(Pattern.matches(PwPattern, userPw)) {
logger.info("성공" + userPw);
userService.userInfUp(userVO);
return 1;
}
else {
logger.info("실패..." + userPw);
return 2;
}
}
반응형
'WEB' 카테고리의 다른 글
| [NUXT] http -> https로 서버 띄우기 #https://localhost (0) | 2022.11.30 |
|---|---|
| [VUE] compulsion rerendering (강제 렌더링 하기) (0) | 2022.11.24 |
| [JavaScript] new Promise를 활용해 비동기 콜백 만들기(axios) (0) | 2022.09.20 |
| [WEB] Web Server 과 WAS(Web Application Server)의 차이점 (2) | 2022.09.13 |
| [WEB] 서블릿(Servlet)이란 ? (0) | 2022.08.24 |
