우선 프로젝트를 하나 생성한다.
File - New - Dynamic Web Project
Name = JSP2_Data01
그리고 Web Content에서
우클릭 - New - JSP File
Name - JSP2_1_TextData.jsp
Next 클릭하고
JSP_Text 템플릿 선택 후, Finish 클릭
<%@ page language="java" contentType="text/plain; charset=UTF-8" pageEncoding="UTF-8"%>
이렇게 나올 것이다.
<%@ page language="java" contentType="text/plain; charset=UTF-8" pageEncoding="UTF-8"%>
안녕하세요
이렇게 작성한 후, 저장
그 다음 이 문자열을 가져올 클라이언트 파일을 만들것이다.
똑같이 Web Content에서
우클릭 - New - JSP File
Name - JSP2_Client.jsp
템플릿은 JSP HTML5로 선택한 후, Finish 클릭
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
여기다가 버튼을 하나 생성해주자
<body></body>태그 사이에
<button onClick="get_text()">
문자열 가져오기
</button>
<br/>
<div id="result"></div>을 삽입한다.
문자열 가져오기 라는 텍스트를 보여주며 get_text()라는 기능을 가진 버튼을 하나 생성한후
그밑에 div태그를 만들어 주었다.
<title></title> 태그 뒤에 <script></script>태그를 삽입한다.
function get_text(){
$.ajax({
url : "JSP2_1_TextData.jsp",
type : "post",
dataType : "text",
success : function(data){
$("#result").text(data.trim());
}
});
}get_Text()라는 함수는 url에 post타입으로 text 데이터 형식의 데이터를 받아 온 후, 성공적으로 받아오면 result에 데이터를 공백없이 뿌려주는 코드이다.
하지만 여기서 실행하면 실행되지 않는다.
왜냐하면 ajax 제이쿼리를 사용하기 위해서는 코드를 추가해줘야 하기 때문이다.
jquery.com 에 접속하여 DownLoad에 들어가 창을 내리면
위와 같은 화면이 나온다.
저기 두줄의 스크립트를 복사하여
<title></title>태그 밑에 붙여넣기 한다.
그 후, JSP2_Client.jsp를 선택한 후, 실행하면 버튼이 나타나는데 클릭하면 '안녕하세요' 가 나타난다.
※ 아마도 JSP파일은 이클립스안에서 에러가 뜰것이다. 지금은 신경쓰지 않아도 되니 무시하자.
'Develop > JSP' 카테고리의 다른 글
| JSP HelloWorld 출력하기 및 톰캣 설정 (0) | 2021.08.06 |
|---|---|
| JSP 템플릿 생성 (0) | 2021.08.06 |
| JSP 개발환경 구축 - 이클립스 (0) | 2021.08.06 |
| JSP 개발환경 구축 (0) | 2021.08.06 |
