[Ajax] 15. encoded_form

1. encoded_form_data

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.0.min.js"></script>
<title>Ajax 사용 - GET방식</title>
</head>
<body>
	<form id="f1">
		이름 : <input type="text" id="name" name="name"><br>
		성별 : 
			남<input type="radio" class="gender" name="gender" value="M" checked/>
			여<input type="radio" class="gender" name="gender" value="F" checked/>
			연령대 : 
			<select id="age" name="age">
				<option value="" selected>--연령대를 선택하세요--</option>
				<option value="10">~19</option>
				<option value="20">20~29</option>
				<option value="30">30~39</option>
				<option value="40">40~49</option>
				<option value="40">50~59</option>
				<option value="40">60~</option>
			</select>
	</form>
	<button type="button" id="save">저장</button>
	<Script>
		$(document).ready(function() {
			$("#save").click(function() {
				var name = $("#name").val();
				var gender = $("input.gender:checked").val();
				var age = $("#age > option:selected").val();

				//직접 x-www-form-urlencoded 데이터 형식 만들기
				//사용자 입력 필드가 많아지면 귀찮고 복잡해짐
				var param = "name" + encodeURIComponent(name) + "&gender=" + gender + "&age=" + age;
				console.log(param);
			});
		});
	</Script>
</body>
</html>

저작자표시 비영리 변경금지

'💻 1. 웹개발_Front end > 1-7 Ajax' 카테고리의 다른 글

[Ajax] 17. Ajax 전역 이벤트 함수 (0)	2021.10.06
[Ajax] 16. 헬퍼 함수 (0)	2021.10.06
[Ajax] 14. jsPromise (콜백 지옥 해결법)과 jqWhen (0)	2021.10.06
[Ajax] 13. Ajax Callback 지옥 (0)	2021.10.06
[Ajax] 12. XHR객체를 이용한 콜백함수 (0)	2021.10.06