자바 스크립트 팝업창으로 el 태그 값을 넘기는 방법은 다음과 같다.
순서도를 보자
1. onclick으로 자바 스크립트 함수에 ${board.num} el 태그 값을 전달한다.
2. popup 함수에 매개변수 num을 선언한다.
3. 선언된 매개 변수를 window.open 팝업 함수의 url을 통해 .do로 전달한다.
4. 전달된 매개변수 값은 Controller에서 출력하여 결과를 확인한다.
<%@ 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>
<table>
<tr>
<td>번호</td><td>제목</td><td>작성자</td><td>조회수</td>
</tr>
<c:forEach var="board" items="${selectBoard }">
<tr>
<td>${board.num }</td>
<!-- oncliick으로 자바스크립트 함수에 ${board.num}의 값을 전달한다. -->
<td><a href="#" onclick="popup(${board.num});">${board.subject }</a></td>
<td>${board.writer }</td>
<td>${board.readcount }</td>
</tr>
</c:forEach>
</table>
</body>
</html>
<script type="text/javascript">
/* popup 함수에 매개 변수 num을 선언한다. */
function popup(num){
/* 매개변수 num을 알럿으로 출력한다. */
alert(num);
/* 다음과 같이 window.open 함수로 url에 값을 전달한다. */
window.open("/board/popup.do?num="+num,"width=300, height=300");
}
</script>
컨트롤러 비밀번호는 다음과 같이 구성해보자
@RequestMapping(value = "/board/popup.do")
public String popup(BoardVO vo, Model model) {
//전달한 함수는 BoardVO로 받아서 출력을 시도한다.
System.out.println("vo : " + vo.getNum());
BoardVO boardVO = boardService.getBoard(vo);
System.out.println("비번 : "+boardVO.getPasswd());
model.addAttribute("board", boardVO);
return "/board/popup";
}
그럼 코드를 실행하여 확인을 해보도록하자
다음과 같이 제목을 클릭하면 번호가 팝업창으로 나온다.
그리고 팝업창을 확인할 수 있다.
콘솔에서 전달된 값을 확인할 수 있다.
<%@ 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>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btnStr").click(function(){
alert("접속");
var pwd1 = $("#pw1").val();
var pwd2 = $("#pw2").val();
if(pwd1==pwd2){
alert("비밀번호가 일치합니다.");
window.close();
window.opener.location.href="/board/contentBoard.do?num="+$("#num").val();
} else {
alert("비밀번호가 불일치합니다.");
window.close();
window.opener.location.location.href="/board/selectBoard.do"
}
})
})
</script>
</head>
<body>
<input type="hidden" id="num" value="${board.num }">
<input type="hidden" id="pw1" value="${board.passwd}">
<input type="text" id="pw2">
<input type="button" id="btnStr" value="비밀번호 확인">
</body>
</html>'[HTML & CSS & JavaScript] > Javascript&JQuery' 카테고리의 다른 글
| [제이쿼리] 이미지 배열 구하기 (0) | 2020.01.28 |
|---|---|
| [자바스크립트] window.onload 와 $(document).ready 의 차이점 (0) | 2020.01.26 |
| [자바스크립트] 로그인 후 글쓰기 기능(javascript에 jstl 변수 입력) (0) | 2019.12.29 |
| [자바스크립트] 아이디 중복 체크 만들기(스크립트에서 JSTL 사용하기) (0) | 2019.12.26 |
| [JAVA Script 개념] onclick을 사용하여 sciprt를 사용하자 (0) | 2019.12.09 |