serialize() 메서드는
표준 URL 인코딩 표기법으로 텍스트 문자열을 만듭니다. 텍스트 박스 및 와 같은 개별 양식 컨트롤이 선택된 jQuery 개체에 대해 작동할 수 있습니다
$( "input, textarea, select" ).serialize();
그러나 일반적으로 직렬화를 위해 자체를 선택하는 것이 더 쉽습니다 .
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
console.log( $( this ).serialize() );
});
이 경우 jQuery는 양식 내에서 성공한 컨트롤을 직렬화합니다. form포함된 입력에 대해 요소만 검사되며, 다른 모든 경우에는 직렬화할 입력 요소가 메서드에 전달된 집합의 일부여야 합니다 .serialize(). 세트에서 양식과 해당 하위를 모두 선택하면 직렬화된 문자열이 중복됩니다.
참고: "성공적인 컨트롤" 만 문자열에 직렬화됩니다. 양식이 단추를 사용하여 제출되지 않았으므로 제출 단추 값이 직렬화되지 않습니다. 양식 요소의 값이 직렬화된 문자열에 포함되려면 요소에 name속성이 있어야 합니다.
확인란 및 라디오 버튼( input"라디오" 또는 "확인란" 유형의 ) 값은 선택된 경우에만 포함됩니다.
파일 선택 요소의 데이터는 직렬화되지 않습니다.
Example 예제를 따라하여 참고해주세요.
Ajax 요청에서 서버로 보낼 수 있는 쿼리 문자열로 양식을 직렬화합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>serialize demo</title>
<style>
body, select {
font-size: 12px;
}
form {
margin: 5px;
}
p {
color: red;
margin: 5px;
font-size: 14px;
}
b {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<br>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<br>
<input type="checkbox" name="check" value="check1" id="ch1">
<label for="ch1">check1</label>
<input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
<label for="ch2">check2</label>
<br>
<input type="radio" name="radio" value="radio1" checked="checked" id="r1">
<label for="r1">radio1</label>
<input type="radio" name="radio" value="radio2" id="r2">
<label for="r2">radio2</label>
</form>
<p><tt id="results"></tt></p>
<script>
function showValues() {
var str = $( "form" ).serialize();
$( "#results" ).text( str );
}
$( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
$( "select" ).on( "change", showValues );
showValues();
</script>
</body>
</html>
'코딩 배우기' 카테고리의 다른 글
| JQuery UI 위젯 팩토리 플러그인 (0) | 2023.05.15 |
|---|---|
| jquery ajax() (0) | 2023.05.12 |
| [jquery] .add( 선택자 ) (0) | 2023.05.12 |
| 자바 JPA 트랜잭션 커밋(commit) (0) | 2023.05.11 |
| JPA(Entity Manager)는 자바에서 ORM(Object Relational Mapping) 기술을 지원하기 위한 API (0) | 2023.05.11 |
댓글