JQuery를 사용하여 양식 데이터 가져오기
이 문서에서는 JQuery를 사용하여 양식 데이터를 가져오는 방법에 대해 설명합니다. serialize() 메서드는 양식 제출 또는 입력 필드의 업데이트에서 데이터를 사용하는 데 널리 사용됩니다.
또 다른 방법인 serializeArray()는 배열 형식으로 양식 데이터를 나타내는 데 병렬로 사용됩니다. 양식 데이터를 개체로 저장하는 형식은 아직 정의된 메서드와 통합되어 있지만 가능합니다.
위에서 언급한 각 접근 방식을 따를 수 있는 방법을 알아보겠습니다.
JQuery를 사용하여 양식 데이터 가져오기
jQuery에서 양식 또는 입력 필드 데이터를 가져오려면 따라야 할 두 가지 방법이 있습니다. 하나는 serialize() 메서드이고 다른 하나는 serializeArray() 메서드입니다.
이러한 기술은 사용자 선호도, 사용자 분류 등에 대한 완전한 지식이 있는 경우 양식 데이터를 얻는 데 유용합니다. 이것들은 또한 데이터베이스에 저장될 수 있습니다.
그렇다면 양식 데이터를 가져올 때 어떤 형식이 될 수 있습니까?
serialize() 메서드는 문자열을 반환하고 다른 입력 유형은 &로 구분됩니다. 마지막으로 양식 데이터를 보다 확장 가능한 방식으로 가져오는 serializeArray() 메서드가 있습니다.
데이터를 배열로 보여줍니다. 그리고 여기서는 해당 데이터를 개체로 가져올 수 있는지도 검사합니다. 이제 코드 세그먼트로 넘어갑시다!
serialize() 메서드를 사용하여 양식 데이터 가져오기
이 예에서는 두 개의 필드가 있습니다. 하나는 텍스트 유형 입력 필드이고 다른 하나는 간단한 옵션 선택 섹션입니다. 해당 필드에 어떤 입력을 입력하든 serialize() 메서드를 사용하여 해당 데이터를 문자열 형식으로 가져올 수 있습니다. 그럼 코드 베이스에서 무슨 일이 일어나는지 봅시다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>form data</title>
<style>
div {
margin-top: 27px;
}
#serialize {
background-color: #eee;
border: 1px solid #111;
padding: 3px;
margin: 9px;
width: 300px;
}
</style>
</head>
<body>
<form action="">
Name: <input type="text" name="name">
<select name="hair" id="hair">
<option value="Hair">Hair</option>
<option value="black">black</option>
<option value="brown">brown</option>
<option value="blue">brown</option>
</select>
</form>
<div>Serialize:
<div id="serialize"></div>
</div>
<script>
$(function() {
var update = function() {
$('#serialize').text(
JSON.stringify($('form').serialize())
);
};
update();
$('form').change(update);
})
</script>
</body>
</html>
출력:
이름 필드에 값을 입력하면 업데이트가 추가되는 것을 볼 수 있습니다. 또한 셀렉트 박스에서 헤어 컬러를 검은색으로 선택하고 serialize() 메서드로 결정된 문자열로 수정했습니다.
serializeArray() 메서드를 사용하여 양식 데이터 가져오기
이 특정 예는 이전 세그먼트에서 수행된 동일한 작업을 의미하지만 차이점은 여기서 출력이 배열 형식이 된다는 것입니다. 배열은 더 정의되어 있으며 이 배열 규칙은 일반적인 스타일과 다릅니다. 대신 개체의 배열입니다.
따라서 0 인덱스 배열 요소는 첫 번째 입력 필드의 키 쌍 값을 보유하고 1 인덱스 배열은 select-option 선택 항목을 저장합니다. 하지만 먼저 코드를 확인해 봅시다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>form data</title>
<style>
div {
margin-top: 27px;
}
#serializearray{
background-color: #eee;
border: 1px solid #111;
padding: 3px;
margin: 9px;
width: 300px;
}
</style>
</head>
<body>
<form action="">
Name: <input type="text" name="username">
<select name="hair" id="hair">
<option value="Hair">Hair</option>
<option value="black">black</option>
<option value="brown">brown</option>
</select>
</form>
<div>Serialize Array:
<div id="serializearray"></div>
</div>
<script>
$(function() {
var update = function() {
$('#serializearray').text(
JSON.stringify($('form').serializeArray())
);
};
update();
$('form').change(update);
})
</script>
</body>
</html>
출력:
여기에서 값이 변경되고 머리카락의 색상이 업데이트됩니다. 그러나 결과가 배열 형식이고 두 개의 개체를 항목으로 사용했음을 알 수 있습니다.
다음으로 양식 데이터를 객체로 직접 저장할 수 있는지 살펴보겠습니다. 그래서 그것을 위해 가자.
개체 양식에서 양식 데이터 가져오기
이 예제에서는 이전과 동일한 코드를 사용하지만 여기서는 두 개의 div 요소를 사용하여 두 개의 객체를 출력해야 합니다. serializeArray() 메서드에 의해 생성된 배열을 반복하고 개체로 구문 분석하는 $.each() 메서드를 추가했습니다.
배열 인덱스를 정의하기 위해 두 개의 조건문을 사용했음을 알 수 있습니다. 그렇지 않으면 마지막 요소를 반복하여 마지막 필드만 생성됩니다. 먼저 코드 스니펫을 확인하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>form data</title>
<style>
div {
margin-top: 27px;
}
#serializeobj1, #serializeobj2{
background-color: #eee;
border: 1px solid #111;
padding: 3px;
margin: 9px;
width: 300px;
}
</style>
</head>
<body>
<form id="form">
Name: <input type="text" name="username">
<select name="hair" id="hair">
<option value="Hair">Hair</option>
<option value="black">black</option>
<option value="brown">brown</option>
<option value="green">brown</option>
</select>
</form>
<div>Serialize Object:
<div id="serializeobj1"></div>
<div id="serializeobj2"></div>
</div>
<script>
$(function() {
var obj = {}
var cnt=0;
var update = function() {
$.each(
$('#form').serializeArray(), function(i, val){
if(i==0){
$('#serializeobj1').text(
JSON.stringify(
obj[i]=val
)
)
}
if(i==1){
$('#serializeobj2').text(
JSON.stringify(
obj[i]=val
)
)
}
})
};
update();
$('form').change(update);
})
</script>
</body>
</html>
출력:
