2017년 3월 22일 수요일

JSP 변수를 자바스크립트(JavaScript)에서 사용하는 법





JSP로 웹 프로젝트를 개발하다 보면 JSP의 변수를 JavaScript에서 사용해야 할 일이 종종발생한다.
간단한 JSP 변수로부터 ArrayList의 값을 자바스크립트에서 사용해야 할 경우도 있다.
아래 코드는 JSP의 변수를 JavaScript에서 사용하는 간단한 코드이다.

<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<!-- 
아래 코드는 JSP의 변수를 자바스크립트에서 사용하는 방법에 대한 코드이다.
 -->
<script type="text/javascript">
<%
ArrayList<String> arr = new ArrayList<String>();
arr.add(0, "첫 번째");
arr.add(1, "두 번째");
arr.add(2, "세 번째");
arr.add(3, "네 번째");
arr.add(4, "다섯 번째");
for(int i=0; i<5; i++)
{
%>
//alert("i: "+ i); //이런 식으로는 다음 에러 발생 Uncaught ReferenceError: i is not defined 
//이런식으로 해야 정상적으로 JSP 변수의 값을 자바스크립트에서 사용 가능
//JSP쪽 변수 i의 값을 자바스크립트에서 다음과 같이 사용한다.
alert("i~: " + <%= i %>); 
//아래 코드의 경우는 다음 에러 발생. Uncaught SyntaxError: missing ) after argument list
//따옴표로 감싸야한다. 왜냐하면 데이터가 문자열이기 때문이다.
//console.log("arr : ", <%= arr.get(i) %>); 
console.log("arr[", <%= i %>, "] ⇒ ", '<%= arr.get(i) %>'); //가능
//위 console.log()에서 다음과 같이 출력된다.
//arr[ 0 ] ⇒  첫 번째
//arr[ 1 ] ⇒  두 번째
//arr[ 2 ] ⇒  세 번째
//arr[ 3 ] ⇒  네 번째
//arr[ 4 ] ⇒  다섯 번째
<%
}
%>

</script>
</body>
</html>

댓글 없음:

댓글 쓰기