Spring) 3편:ajax와 button으로 회원 가입 기능을 완성하다!!

저번 시간에

submit으로 ajax를 실행하면

DB에 데이터는 넘어가지만, 무조건 error가 뜨는 상황이 발생했다

구글링을 해보니, submit으로 ajax를 실행하게 되면 무조건 error가 뜬다는 정보를 입수,

가입 기능(클릭하면 data에 넘어가지는 기능)을 button으로 바꿔보자 한다

 

 

버튼을 눌러도 반응을 안 하는 것에서 발전하여

우여곡절끝에 버튼 클릭은 되는데,

데이터는 안 넘어가지는 상황이 발생한다...

 

 

 

signUp.jsp

      $('#signBtn').click(function () {

        let form = document.getElementById("form");
              if (form.id.value == "") {
                alert("아이디를 입력해주세요");
                form.id.focus();
                return false;
              }
              if (form.pwd.value == "") {
                alert("비밀번호를 입력해주세요");
                form.pwd.focus();
                return false;
              }
              if (form.name.value == "") {
                alert("이름을 입력해주세요");
                form.name.focus();
                return false;
              }
                  function sol () {
                    let form = document.getElementById("form");
                    var id = form.id.value;
                    var pwd = form.pwd.value;
                    var name = form.name.value;
                    var email = form.email.value;
                    var birth = form.birth.value;
                    var data = {id:id, pwd:pwd, name:name, email:email,birth:birth};
                    alert(data.id);
                    $.ajax({
                      type: 'POST', //요청한 메서드
                      url: '/signUp', //요청하는 url
                      header: {"content-type":"application/json"}, //요청 헤더(내가 JSON으로 보내는 거야)
                      dataType: 'text', //전송받을 데이터의 타입은 이거야
                      data: JSON.stringify(data), //서버를 전송할 데이터, 직렬화(문자열화) 필요해서 stringify()
                      success: function (data) { //서버로부터 응답(result)가 도착하면 호출될 함수
                        alert(data);
                        location.href="/hi";
                      },
                      error: function () { //응답 실패하면 호출될 내용
                        alert("가입 실패");
                        location.href="/hi";
                      }
                    });
                  }

              sol();

      })

 

 

 

signUpController

 

	@PostMapping("/signUp") // /hi/signUp
	@ResponseBody
	public String signUpTest(String id, String pwd, String name, String email, String birth) throws Exception {

		// 매개변수 값이 잘 들어왔는지 알아보기 위해 출력
		System.out.println("id = " + id);
		System.out.println("pwd = " + pwd);
		System.out.println("name = " + name);
		System.out.println("email = " + email);
		System.out.println("birth = " + birth);

		MemberDto dto = new MemberDto(id,pwd,name,email);
		//1.sql문으로 insert
		int num = service.signUp(dto);
		// insert가 동작했는지 알아보기 위해 출력
		System.out.println("num = " + num);
		if(num==1) {
			return id+"님 가입이 완료되었습니다";
		}
		return "가입 실패";
	}

 

 

중간에 하나 오류를 잡았다

ajax에서 요청 url을 이상하게 줬던 것 ㅠㅠ

관리자모드(F12)에

Genaral의

Request URL에 매핑이 잘못 되어 있었다 ㅠㅠㅠ

일단 수정!!!

 

 

 

하지만...

고쳤는데도 불구하고

여전히 데이터는 들어가지 않았다ㅎㅎ

 

쒣~~~~~~

삽질끝에 이유를 알았다

header로 content-type을 제대로 줬다고 생각했는데

관리자모드로 봐보니

 

 

 

Request Header 의 Content-Type이 form 어쩌구 였던 것!!!

그래서 직접적으로 content-Type을 JSON으로 명시해주었다

 

$.ajax({
  type: 'POST', //요청한 메서드  data 색깔이 보라색되야하는데 왜 흰색임;info 저거 형식이 틀렷을텐데..아니 data : info 이게 안될텐데
  url: '/signUp', //요청하는 url
  contentType : "application/json",
  data: JSON.stringify(info),
  dataType: 'text',
  success: function (result) { //서버로부터 응답(result)가 도착하면 호출될 함수
    console.log(result)
    alert(result);
    location.href="/hi";
  },
  error: function (request, status, error) { //응답 실패하면 호출될 내용

    console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
    alert("가입 실패");
    location.href="/hi";
  }
});

 

컨트롤러에도 Dto를 매개변수로 했다

 

@PostMapping("/signUp") // /hi/signUp
@ResponseBody
public String signUpTest(@RequestBody MemberDto dto) throws Exception {
   System.out.println("dto = " + dto);
   //1.sql문으로 insert
   int num = service.signUp(dto);
   // insert가 동작했는지 알아보기 위해 출력
   System.out.println("num = " + num);
   String hi = "";
   if(num==1) {
      hi = "SignUp OK";
      return hi;
   }
   hi="SignUp ERR";
   return hi;
}

 

 

결과는~?

 

 

 

 

야스~!

 

 

DB에도 제대로 들어간 것을 확인했다~~!!~!

 

 

그리고 데이터가 들어간 후,

 

다시 홈으로 돌아가는 걸 화긴~!

 

꺆....성공해부려따 드디어 ㅠㅠㅠㅠ

며칠의 삽질끝에...

넘나 기뻐서 앞구르기 500번 가능~~!~!

 

 

 

슨배님한테 자랑을 했더니

 

 

ㅇㅏ....

다음번엔 비번 암호화로 찾아뵙겠습니다^^

(일단 아이디 중복확인 하구웅~!)