-
자바스크립트로 파라미터값 불러와 출력하기(예제)개발 정보/JavaScript 2016. 10. 22. 15:22
예제를 통해 파라미터값을 자바스크립트로 받아와 출력해보았다.
* basicform.html
<화면>
<소스>
<!DOCTYPE html>
<html>
<head>
<title>FORM 입력 예제</title>
<meta charset="utf-8">
</head>
<body>
<h3>다양한 입력 폼</h3>
<fieldset>
<legend>HTML4 의 폼 태그</legend>
<form method="get" action="basicformaction.html">
성명 <input type="text" name="person" /> <br>
암호 <input type="password" name="pwd" /> <br>
성별 <input type="radio" name="gender" value="male" />남성
<input type="radio" name="gender" value="female" />여성<br>
직업 <select name="job" size="1">
<option>학생</option>
<option>회사원</option>
<option>공무원</option>
<option>기타</option>
</select>
<p>
구입희망분야(복수선택 가능)<br> - 분야
<input type="checkbox" name="books" value="computer" />컴퓨터
<input type="checkbox" name="books" value="economy" />경제
<input type="checkbox" name="books" value="common" />상식<br>
건의 사항 <br>
<textarea name="comments" rows="4" cols="40" /></textarea>
</p>
<input type="hidden" name="test" value="noinputdata"/>
<hr>
<input type="submit" value="신청" />
<input type="reset" value="취소" />
</form>
</fieldset>
</body>
</html>
위의 화면에서 내용을 입력하고 전송 버튼을 누르면,
입력된 내용이 파라미터 형식으로 basicformaction.html로 넘어가게 된다.
* basicformaction.html
<화면>
<소스>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var name = location.search;
alert(name == null);
alert(name == '');
var arr = name.split('&');
</script>
</head>
<body>
<pre>
<script type="text/javascript">
for(var i=0; i<arr.length; i++){
// alert(arr[i]+"\n");
document.writeln(arr[i]);
}
</script>
</pre>
</body>
</html>
자바스크립트에서는 파라미터값을 location.search로 받아올 수 있다(post방식은 받아오지 못한다)
head태그에서는 alert으로 테스트를 하였는데, 파라미터값을 받아오지 못할 때(post방식) 무엇을 체크하는지 보았는데, name이 공백일 때('') true가 되었다
파라미터값을 받아왓을 때에는 split함수로 각각배열에 담아 출력해주었다.
여기서 body태그 안의 스크립트가 출력해주는 역할을 한다.
참고로, document.writeln은 <pre>태그 안에 스크립트가 들어갈 때 자동 줄바꿈 처리를 해주는 함수이다.
'개발 정보 > JavaScript' 카테고리의 다른 글
자바스크립트 API: sort 함수(예제): asc/desc(어센던트/디센던트) sort (0) 2016.10.23 자바스크립트 API: Reverse 함수(예제) (0) 2016.10.23 자바스크립트: 배열 테스트 및 향상된 for문 사용법(예제) (0) 2016.10.23 isNaN 함수 - 숫자가 아닌 경우를 체크(예제) (0) 2016.10.23 자식창(팝업) 정보를 부모창에 넘기기 (0) 2016.10.06
