jQuery의 serializeArray() 함수를 사용하면 폼(form) 데이터를 배열로 가져올 수 있습니다. 이 함수는 폼 내의 모든 입력 요소의 이름과 값의 쌍을 객체 배열로 반환합니다. 아래는 serializeArray() 함수를 사용하여 폼 데이터를 가져와서 콘솔에 출력하는 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Serialize Form Data</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="John Doe">
<br>
<label for="email">Email:</label>
<input type="text" id="email" name="email" value="john@example.com">
</form>
<button id="serializeButton">Serialize Data</button>
<script>
$(document).ready(function () {
// 데이터 직렬화 버튼 클릭 시
$("#serializeButton").click(function () {
// 폼 데이터 가져오기
var formDataArray = $("#myForm").serializeArray();
// 콘솔에 출력
console.log(formDataArray);
// 실제로는 여기서 서버로 데이터를 전송하거나 다른 작업을 수행할 수 있습니다.
});
});
</script>
</body>
</html>반응형
이 예제에서는 "Serialize Data" 버튼을 클릭하면 폼 데이터가 serializeArray() 함수를 통해 가져와지고, 이 데이터가 콘솔에 출력됩니다. 프로젝트에서는 이 데이터를 서버로 전송하거나 다른 필요한 작업을 수행하는 데 활용할 수 있습니다.
주의: serializeArray() 함수는 폼 데이터를 배열로 가져오기 때문에 필요에 따라 데이터를 조작하거나 다른 형식으로 변환해야 할 수 있습니다.
반응형
'IT > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] 입력창에 숫자만 입력하는 방법 (1) | 2024.03.20 |
|---|---|
| [자바스크립트] 변수로 받은 ID를 JQuery에서 사용하는 방법 (0) | 2024.01.19 |
| JSP 자식창에서 부모창 함수 호출 (0) | 2024.01.10 |
| html에 html나 jsp가 중첩된 소스 디버깅 방법 (0) | 2023.12.18 |
| [javascript] 0만큼 오른쪽 시프트를 이용한 float을 int로 변환 (0) | 2023.11.03 |
