반응형
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
Copy URL 클릭 후 join.jsp에 소스를 붙여준다.
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script><script>
$('#btnIdDupChk').on('click', function(){
var inputId = $('#member_id').val();
// 입력값이 없을때
if(inputId.length == 0) { // inputId == ''
alert('아이디를 입력하세요.');
$('#member_id').focus();
return;
}
// 입력값이 있으면 새로운 자식창(브라우저) 열기
var childWindow = window.open('/member/joinIdDupChk?id=' + inputId, 'joinIdDupChk', 'width=500, height=400');
});
</script>
Spring 제이슨 변환기
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.12.3</version>
</dependency>
XML 변환
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.dataformat/jackson-dataformat-xml -->
<dependency>
<groupId>com.fasterxml.jackson.dataformat</groupId>
<artifactId>jackson-dataformat-xml</artifactId>
<version>2.12.3</version>
</dependency>
직접 자동변환 Gson
<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.7</version>
</dependency>
썸네일 자동만들어주는 라이브러리
<!-- https://mvnrepository.com/artifact/net.coobird/thumbnailator -->
<dependency>
<groupId>net.coobird</groupId>
<artifactId>thumbnailator</artifactId>
<version>0.4.14</version>
</dependency>
MemberController.java
@GetMapping("/joinIdDupChk")
public String joinIdDupChk(String id, Model model) {
int rowCount = memberService.getCountById(id);
boolean isIdDup = (rowCount == 1) ? true : false;
// model 객체에 View(JSP)에서 사용할 데이터를 저장하기
// 스프링이 request.setAttribute(키, 값); 호출로 옮겨줌
model.addAttribute("joinIdDupChk", isIdDup);
model.addAttribute("id", id);
return "member/joinIdDupChk";
}
※ 전에 로그인을 하지않아도 회원정보수정화면으로 바로 갈수있어 보안문제때문에
interceptor 썼는데 여기서도 이 화면은 제외 시켜달라고 적용해줘야 한다.
<exclude-mapping path="/member/joinIdDupChk"/>
joinIdDupChk.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<c:choose>
<c:when test="${ isIdDup eq true }">
<p>아이디 중복, 사용중인 아이디 입니다.</p>
</c:when>
<c:otherwise>
<p>
사용가능한 아이디 입니다.
<button type="button" id="btnUseId">아이디 사용</button>
</p>
</c:otherwise>
</c:choose>
<form action="/member/joinIdDupChk" method="get" name="wfrm">
<input type="text" name="id" value="${ id }">
<button type ="submit">아이디 중복확인</button>
</form>
<script>
var btnUseId = document.querySelector('#btnUseId');
btnUseId.addEventListener('click', function(){
// window는 생략이 가능함
// 현재창의 id 입력값을 부모창의 id 입력상자에 배치하기
window.opener.document.frm.id.value = wfrm.id.value;
window.close(); // close(); 현재 브라우저 창 닫기
});
</script>
</body>
</html>
반응형
'Back-End > Java' 카테고리의 다른 글
| [Spring] Legacy Project 페이징 구현하기 (0) | 2021.06.13 |
|---|---|
| [Spring] Legacy Project 게시판 구현하기 (0) | 2021.06.10 |
| [Spring] Legacy Project Handler intercepor 사용법 (0) | 2021.06.10 |
| [Spring] Legacy Project 회원탈퇴 및 회원정보수정 구현하기 (0) | 2021.06.09 |
| [Spring] Legacy Project DB연동 및 한글깨짐 해결 (0) | 2021.06.09 |