Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- jQuery
- 프로그래밍
- Java
- 교보
- 급성심근경색증
- 문자열
- 리스트
- 가입
- 보험료
- 교보생명
- 웹개발
- 자바스크립트
- 코딩
- 심장질환
- 중도인출
- 파이썬
- 납입
- 사망
- javascript
- 추가납입
- Vue.js
- 뇌출혈
- python
- 인출수수료
- 수수료
- 특약
- PythonProgramming
- 보험
- 변환
- 프론트엔드
Archives
- Today
- Total
SeouliteLab
jQuery의 .serialize() 메소드: 폼 데이터 직렬화하기 본문
jQuery의 .serialize()
메소드는 폼 요소의 데이터를 직렬화하여 URL 쿼리 문자열 형식으로 반환합니다. 이를 통해 폼 데이터를 간편하게 수집하고 AJAX 요청을 보낼 때 사용할 수 있습니다. 다양한 예제를 통해 이 메소드를 자세히 살펴보겠습니다.
예제 1: 단일 폼 요소 직렬화
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .serialize() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#serializeForm").submit(function(event) {
event.preventDefault();
var formData = $(this).serialize();
alert("직렬화된 데이터: " + formData);
});
});
</script>
</head>
<body>
<form id="serializeForm">
<input type="text" name="username" value="John">
<input type="email" name="email" value="john@example.com">
<button type="submit">제출</button>
</form>
</body>
</html>
출력 결과: 폼을 제출하면 알림 창이 뜨며, 직렬화된 데이터가 표시됩니다.
예제 2: 여러 폼 요소 직렬화
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .serialize() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#serializeForm").submit(function(event) {
event.preventDefault();
var formData = $(this).serialize();
alert("직렬화된 데이터: " + formData);
});
});
</script>
</head>
<body>
<form id="serializeForm">
<input type="text" name="username" value="John">
<input type="email" name="email" value="john@example.com">
<input type="checkbox" name="interest" value="programming" checked> 프로그래밍
<input type="checkbox" name="interest" value="design"> 디자인
<button type="submit">제출</button>
</form>
</body>
</html>
출력 결과: 폼을 제출하면 알림 창이 뜨며, 직렬화된 데이터가 표시됩니다. 체크된 관심사 항목도 포함됩니다.
예제 3: 선택된 옵션 직렬화
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .serialize() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#serializeForm").submit(function(event) {
event.preventDefault();
var formData = $(this).serialize();
alert("직렬화된 데이터: " + formData);
});
});
</script>
</head>
<body>
<form id="serializeForm">
<select name="language">
<option value="javascript">JavaScript</option>
<option value="python" selected>Python</option>
<option value="java">Java</option>
</select>
<button type="submit">제출</button>
</form>
</body>
</html>
출력 결과: 폼을 제출하면 알림 창이 뜨며, 선택된 언어가 직렬화된 데이터로 표시됩니다.
예제 4: 숨겨진 필드 직렬화
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .serialize() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#serializeForm").submit(function(event) {
event.preventDefault();
var formData = $(this).serialize();
alert("직렬화된 데이터: " + formData);
});
});
</script>
</head>
<body>
<form id="serializeForm">
<input type="hidden" name="userID" value="123">
<button type="submit">제출</button>
</form>
</body>
</html>
출력 결과: 폼을 제출하면 알림 창이 뜨며, 숨겨진 필드의 데이터가 직렬화된 데이터로 표시됩니다.
예제 5: 여러 폼 요소가 있는 여러 폼 직렬화
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .serialize() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#serializeForm1, #serializeForm2").submit(function(event) {
event.preventDefault();
var formData = $(this).serialize();
alert("직렬화된 데이터: " + formData);
});
});
</script>
</head>
<body>
<form id="serializeForm1">
<input type="text" name="username" value="John">
<input type="email" name="email" value="john@example.com">
<button type="submit">제출</button>
</form>
<form id="serializeForm2">
<input type="text" name="username" value="Jane">
<input type="email" name="email" value="jane@example.com">
<button type="submit">제출</button>
</form>
</body>
</html>
출력 결과: 어느 폼을 제출하든 알림 창이 뜨며, 해당 폼의 데이터가 직렬화된 데이터로 표시됩니다.
'프로그래밍' 카테고리의 다른 글
jQuery의 .pushStack() 메소드: 요소 스택 조작하기 (0) | 2024.04.05 |
---|---|
jQuery의 .serializeArray() 메소드: 폼 데이터 배열로 직렬화하기 (0) | 2024.04.05 |
jQuery의 .unload() 메소드: 페이지가 언로드될 때 이벤트 처리하기 (0) | 2024.04.05 |
jQuery의 .undelegate() 메소드 탐구하기: 이벤트 핸들러 유연하게 해제하기 (0) | 2024.04.05 |
jQuery의 .unbind() 메소드 탐구하기: 이벤트 핸들러 동적으로 관리하기 (0) | 2024.04.05 |