JSP 23/03/15

서지우·2023년 3월 22일

JSP

목록 보기

2/7

team

teamIsert.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Team MGr</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
	function check() {
	    f = document.frm;
	    if (f.name.value=="") {
	       alert("이름 입력");
	       f.name.focus();
	       return;
	    }
	    if (f.city.value=="") {
	       alert("사는곳 입력");
	       f.city.focus();
	       return;
	    }
	    if (f.age.value=="") {
	       alert("나이 입력");
	       f.age.focus();
	       return;
	    }
	    if (f.team.value=="") {
	       alert("팀명 입력");
	       f.team.focus();
	       return;
	    }
	    f.submit();//제출
	 }
	function check2() {
		document.frm.action = "teamInsertProc2.jsp";
		document.frm.submit();
	}
</script>
</head>
<body>
<div align="center">
<h1>Team Insert</h1>
<form name="frm" method="post" action="teamInsertProc.jsp">
	<table border="1">
	<tr>
		<td width="50" align="center">이름</td>
		<td width="150"><input name="name" value="홍길동"></td>
	</tr>
	<tr>
		<td align="center">사는곳</td>
		<td><input name="city" value="부산"></td>
	</tr>
	<tr>
		<td align="center">나이</td>
		<td ><input name="age" value="27"></td>
	</tr>
	<tr>
		<td align="center">팀명</td>
		<td><input name="team" value="산적"></td>
	</tr>
	<tr>
		<td align="center" colspan="2">
			<input type="button" value="SAVE" onclick="check()">
			<input type="button" value="SAVE2" onclick="check2()">
		</td>
	</tr>
</table>
</form><p>
<a href="teamList.jsp">List</a>
</div>
</body>
</html>

코드해석

CSS로 스타일 지정

<link href="style.css" rel="stylesheet" type="text/css">

만들어 둔 style.css를 link태그로 하이퍼링크를 해줌.
(스타일은 자기가 만들고 싶은대로 하면됨.)

form 태그

<form name="frm" method="post" action="teamInsertProc.jsp">

name과 method, action을 적어줌.

get과 post

get : 데이터를 읽거나(Read), 검색(Retrieve)할 때에 사용되는 method
ex) www.example-url.com/resources?name1=송유현&name2=곽철용

GET 요청은 오로지 데이터를 읽을 때만 사용되고 수정할 때는 사용하지 않습니다.

post : 리소스를 생성/업데이트하기 위해 서버에 데이터를 보내는 데 사용되는 method
ex) www.example-url.com/resources

전송해야될 데이터를 HTTP 메세지의 Body에 담아서 길이의 제한없이 데이터 전송 가능함.

POST는 데이터가 Body로 전송되고, 내용이 눈에 보이지 않아 GET보다 보안적인 면에서 안전하다고 생각할 수 있지만, 민감한 데이터의 경우에는 반드시 암호화해 전송해야 함.

action

form태그의 action 속성은 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시

Script

function check()

버튼 타입은 자바스크립트에서 function을 사용해서 액션발생.

//button 생성
<input type="button" value="SAVE" onclick="check()">

onclick은 버튼을 눌렀을 때 check함수 호출해서 실행하고 액션이 발생.

function check() {
	    f = document.frm;
        // f라는 변수에 name이 frm이 폼 태그를 담음.
	    if (f.name.value=="") {
        	// f.name의 값이 없을때
	       alert("이름 입력");
           // '이름 입력'이라는 경고창 발생
	       f.name.focus();
           // 입력 커서가 f.name으로 맞춰짐
	       return;
	    }
 }

function check2()

<input type="button" value="SAVE2" onclick="check2()">

onclick은 버튼을 눌렀을 때 check2함수 호출해서 실행하고 액션이 발생.

	function check2() {
		document.frm.action = "teamInsertProc2.jsp";
        //teamInsertProc2.jsp로 이동
		document.frm.submit();
        //teamInsertProc2.jsp 입력정보 전송
	}