[Model/Param => ${script} ] / [HTML요소 => $(script) ] 값 받아쓰기

[ Model => HTML ] 

- Model 값 HTML body 부에서 사용하기 

 

(자바) 

model.addAttribute("key", value ); 

return "뷰단"; 

 

(JSP) 

=> VIEW 단의  HTML  에서는 

(1) <%=request.getAttribute("key")%> 

(2) ${key}    

자바로 받거나, EL 로 받아서 사용한다. 

 

 

[ Model => <script> ]

- 마찬가지로 script 단에서 Model 값을 받아 사용하기 위해서는 

(1) alert( ' <%=request.getAttribute("getit")%> ' ); 

(2) alert( ' ${ getit } ' );

 

(1) 자바 (2) EL 로 받아서 사용하면 되는데, 

*주의할점은 JavaScript 에는 엄연히 data Type 이 존재하므로, 

=> '  '  따옴표 처리를 해서 String 임을 명시해줘야 한다. 

( 관련 Error : ~ is not defined  <anonymous> ) 

 

[ Param => HTML  / <script> ] 

- Parameter 로 넘어온 값도, Model 로 넘어온 값과 마찬가지로 

(1) HTML

<%=request.getParameter("getit")%>

${param.getit}    

(2) <script> 

var a =  ' <%=request.getParameter("getit")%>  ' ; 

var a  = ' ${param.getit} ' ; 

 

- script 일때는 String 으로 받아서 사용하면 된다. 

 

 

[ JSON 데이터 일 경우 ] 

- AJAX 사용 할 때, return 값으로 { A : B }  JSON 형식의 데이터가 String으로 들어올 경우, 

<script>

var obj = ' ${result} '; 
var json = JSON.parse( obj );

 

(1) String 타입으로 받아서 ( '  ' 따옴표 ) 

(2) String 타입을 Json타입으로 parsing 해서 사용 ( JS 내부객체 :  JSON.parse( ) ) 

 

=========

 

 

[[ HTML => <script> ]] 
: 해당 HTML 페이지 값을 Script 로 가져오기

 

(1) alert(document.getElementById("here").value);

(2) alert(documnet.querySelector("#here").value); 

(3) alert( $("#here").val( ) );

(4) alert( $("#here")[0].value; 

 

:  DOM객체로 가져와서 사용하거나  -  (1),(2)

jquery 문법을 사용해 가져와서 사용한다.  - (3), (4) 

 

*주의 : jquery 로 $("  ")  HTML 요소를 가져와서 사용할 경우, 기본적으로 jquery 전용 문법만 사용할 수 있다. 

 

- JS (DOM)문법  : .value / .innerHTML /  .textContent 

- jquery문법 : .val( ) / .html( ) / .text( )  

 

=> $(" ")[0] 

jquery 로 가져온 요소에 [0] 처리  를 해주면, => JS 로 전환된다. 

 

즉,

document.getElementById("here")  ==  $("#here")[0]   

 

 이렇게 만들어둔 상태에서는 

다시 원래 JS 문법인 value / innerHTML 등 만 사용이 가능하다. 

 

 

< 정리 > 

Model, Param  (EL) 

(1) HTML 

${ModelKey}  /  ${param.Name} 

(2) <script>  '따옴표 '

var a = ' ${ModelKey} ' ;    /   var a  = ' ${ param.Name } ' ; 

(3) JSON 

var a = ' ${ModelKey} ' ;     

var json = JSON.parse( a ); 

 

HTML Element => <script>

(1) DOM 

alert (document.getElementByID( " " ) ) ; 

alert (document.querySelector(" # " ) ); 

(2) jquery

alert ( $("# id ").val( ) ); 

alert ( $("# id")[0].value );