😧 문제상황
만든 회원가입폼(.jsp)에서 ajax통신을 하고 그 결과가 ok인 경우와 ok가 아닌 경우에 각각 다른 alert("..")를 해주도록 만들었다.
그러나 회원가입 폼(joinForm.jsp)에서 컨트롤러(UserController)로 데이터가 이동이 되지 않는 것을 알게 되었다.
🤗 해결 방법
무엇이 문제일까 고민하던 중, ajax통신을 하기 위해서는 다음과 같은 src를 추가해줘야 한다는 것을 알게 되었다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>그래서 회원가입품인 joinForm.jsp에서 include하고 있는 header.jsp에 위의 코드를 추가해주었고, 그 결과 컨트롤러에서 데이터를 잘 받는 것을 확인할 수 있었다.
결과
🎂 ok인 경우
🍸 ok가 아닌 경우
🍰 컨트롤러에서 받은 데이터(username)을 출력한 결과
코드
joinForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file = "../layout/header.jsp" %>
<div class = "container">
<form action="/blog/user?cmd=join" method="post" onsubmit="return valid()">
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-info" onClick="usernameCheck()">중복체크</button>
</div>
<div class="form-group">
<input type="text" name="username" id="username"class="form-control" placeholder="Enter Username" required/>
</div>
<div class="form-group">
<input type="password" name="password" class="form-control" placeholder="Enter Password" required/>
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" placeholder="Enter Email" required/>
</div>
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-info" onClick="goPopup();">주소검색</button>
</div>
<div class="form-group">
<input type="text" name="address" id="address" class="form-control" placeholder="Enter Aderess" required readonly/>
</div>
<br/>
<button type="submit" class="btn btn-primary">회원가입완료</button>
</form>
</div>
<script>
var isChecking = false; // false이면 submit 버튼을 눌러도 작동안하게 할 것이다.
function valid(){ //return onsubmit이 false이면 회원가입버튼을 눌러도 다음페이지로 넘어가지 않는다.
if(isChecking == false){
alert("아이디 중복체크를 해주세요");
}
return isChecking; //중복검사를 하지 않으면 제출이 안되게 한다.
}
function usernameCheck(){
//DB에서 확인해서 정상이면(중복이 아니면) isChecking=true
// 여기에서 ajax통신해야 한다. html을 받는것이 아니라 데이터만 받으면 된다.
var username = $("#username").val(); //name이란 "속성"에 어떤 값이 담기는지 알아야 하므로 val()을 사용
$.ajax({ //js에서는 {}가 객체임
type: "POST", //type은 데이터 통신 방법, GET으로 하면 하이퍼링크로 하면 안된다. 그러면 응답을 못받기 때문. login처럼 확인여부만 묻기때문에 POST로 해도됨
url: "/blog/user?cmd=usernameCheck", // usernameCheck에 해당하는 컨트롤러로 이동. 주소는 http://localhost8080의 contextpath는 생략가능하다. 이미 그안에 있기 때문
// type이 GET인 경우 url: "/blog/user?cmd=usernameCheck&username=ssar" 이어야 한다.
data: username, // 내가 요청할때 가져갈 http 바디 데이터이다. GET에는 http바디데이터가 없다. 그래서 GET은 쿼리스트링으로 보내야 함
// div에 id가 있으면 data를 찾기 쉽다(document.querySelector로 찾으면 된다.) 근데 여기서는 JQUery문법을 사용한다.
contentType: "text/plain; charset=utf-8", // 내가 지금 던지는 데이터가 어떻게 생겼는지 알려줌
dataType: "text" // 응답받을 데이터의 타입을 적으면 자바스크립트 오브젝트로 파싱해줌. json인 경우 {"result":"있어"}를 파싱해서 var a={result:"있어"} 와 같이 json을 js 오브젝트로 변환해준다.
}).done(function(data){ //통신이 끝나면 이 함수를 실행시켜줌. callback되는 함수. 매개변수는 통신의 결과가 들어온다.
if(data === 'ok'){ // 유저네임 있다는 것
isChecking = false;
alert('유저네임이 중복되었습니다.')
}else{
isChecking = true;
alert("해당 유저네임을 사용할 수 있습니다.")
}
});
}
function goPopup(){
...
}
function jusoCallBack(roadFullAddr){
...
}
</script>
</body>
</html>
UserController.java
// 접근되는 주소: http://localhost:8080/blog/user
@WebServlet("/user")
public class UserController extends HttpServlet {
private static final long serialVersionUID = 1L;
public UserController() {
super();
}
// GET/POST 요청을 하면 doProcess 실행
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doProcess(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doProcess(request, response);
}
// http://localhost:8080/blog/user?cmd = 머시기
protected void doProcess(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String cmd = request.getParameter("cmd");
UserService userService = new UserService();
if(){...}
.
.
.
else if(cmd.equals("usernameCheck")) { // url: "/blog/user?cmd=usernameCheck" 에 의해 연결됨.
//request.getParameter("username"); // 전달되는 데이터가 key&value값이 아닌 text라서 이렇게 받을 수 없음
// 버퍼로 읽으면 된다. 데이터가 username하나라서 while을 적을 필요가 없다
BufferedReader br = request.getReader();
String username = br.readLine();
System.out.println(username);
int result = userService.유저네임중복체크(username);
PrintWriter out = response.getWriter();
if(result == 1) {
out.print("ok"); // 유저네임이 있다.
}else {
out.print("fail");
}
out.flush();
}
}
}
개발자