반응형
웹 데이터를 키밸류 문자열로(key-value)으로 변환시 serialize()를 사용하면 편리합니다.
#key-value 문자열 예시
name=JohnDoe&email=johndoe@example.comform 데이터를 서버에 전송하기 전, Ajax 요청 전
데이터 정렬을 위해 사용하면 됩니다.
HTML 부분
Form 데이터
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Form with jQuery</title>
<!-- jQuery 라이브러리 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="myForm">
<label for="username">Name:</label>
<input type="text" id="username" name="username"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br><br>
<button type="submit">Submit</button>
</form>
<script>
// 자바스크립트 코드
</script>
</body>
</html>
Javascript 부분
jQuery Serialize()로 Form 데이터를 serialize 한다.
$(document).ready(function() {
$('#myForm').on('submit', function(event) {
// 기본 제출 동작 방지
event.preventDefault();
// 폼 데이터 serialize
var serialized = $(this).serialize();
// 결과 콘솔에 출력
console.log(serialized);
});
});
반응형
'Programming Language > Javascript' 카테고리의 다른 글
| [Javascript] 한국어 정규식 동 이름 추출 (0) | 2018.01.25 |
|---|---|
| (스크랩)Javascript 기초 - Object prototype 이해하기 (0) | 2017.12.06 |
| (스크랩) 프로토타입 이해하기 (0) | 2017.09.19 |
| 자바스크립트 한 줄 압축풀기 사이트 (0) | 2017.09.14 |
| multiple selected option 의 값 추출, jQuery (0) | 2017.09.12 |
