[MVC] Post 방식으로 페이지 이동하기

참고 블로그)

https://amongthestar.tistory.com/178

Post 방식으로 페이지 이동하기

 

---

로고 이미지를 클릭했을 때 로그인된 페이지로 넘어가야 하는 상황

하지만 url 매핑을 post로 해줬기 때문에

컨트롤러에서 데이터를 수집해야 하는 상황이었다.

 

Controller

package kr.mds.controller;

@Controller
public class userController {

	@Autowired
	private UserMapper mapper;

	// 회원가입 후 로그인 페이지로 이동
	@PostMapping("/signUp.com")
	public String singUp(User user) {
		// 비밀번호 암호화
		System.out.println("첫번째:" + user.getU_pw());
		System.out.println("첫번째:" + user.getU_pw_confirm());
		// 비밀번호 암호화 (sha256)
		String u_pw = pwEncoder.encrypt(user.getU_pw());
		String u_pw_confirm = pwEncoder.encrypt(user.getU_pw_confirm());
		user.setU_pw(u_pw);
		user.setU_pw_confirm(u_pw_confirm);
		System.out.println("두번째:" + user.getU_pw());
		System.out.println("두번째:" + user.getU_pw_confirm());
		// 회원가입 메서드
		int result = mapper.signUp(user);

		if (result > 0)
			return "redirect:/";
		else
			return "redirect:/";
	}


}

=> 위 컨트롤러에 있는 url로 이동해야 하는 상황

---

jsp

<div class="container">
	<div class="logo_img">
		<a class="logo" href="javascript:listView('${result.u_id}')"> <img alt="MDS로고"
			src="resources/images/MDS_logo.png" width="400px" height="140px">
		</a>
	</div>
 </div>

=> a태그에 href 경로를 설정해준다.

=> 위와 같이 jstl을 선언해주면 get방식이 아닌 post방식으로 url 이동이 가능하다.

---

js

/* 로고 클릭 시 로그인된 메인페이지로 이동 */
function listView(userid){
	    let f = document.createElement('form');
	    
	    let obj;
	    obj = document.createElement('input');
	    obj.setAttribute('type', 'hidden');
	    obj.setAttribute('name', 'u_id');
	    obj.setAttribute('value', u_id);
	    
	    f.appendChild(obj);
	    f.setAttribute('method', 'post');
	    f.setAttribute('action', 'main.com');
	    document.body.appendChild(f);
	    f.submit();
	}

=> 수집할 데이터는 input type을 hidden으로 주고 수집한다.

=> 이후 method 방식과 이동할 url 주소를 입력해주면 완료!