반응형
1. 이론 - 헬퍼 함수
- ajax 서버로 요청을 보낼 깨 전송되는 기본 데이터 형식은 x-www-form-urlencoded 형식
- 한글 및 특수문자는 url encode를 직접해줘서 유니코드로 변경을 해줘야됨
- 사용자로부터 입력받을 경우가 많을 경우에는 직접 x-www-form-urlencoded 형식으로 만들어 주는게 귀찮고 어렵다.
- 헬퍼 함수의 역할은 사용자 입력 필드의 데이터를 x-www-form-urlencoded 형식으로 간단하게 만들어줌
- 헬퍼 함수를 사용할 때는 input의 name 속성과 매핑되기 때문에 항상 name속성을 지정해줘야됨
- name 속성을 지정하지 않으면 빈 값으로 데이터가 넘어감
- 헬퍼 함수를 사용할 때는 항상 form 요소를 선택해서 사용해야됨(serialize, serializeArray)
2. 헬퍼 함수의 종류
1) serialize() : 선택된 폼 요소의 입력 필드 name속성을 이용해 인코딩된 폼 데이터 생성
x-www-form-urlencoded 형식의 문자열로 데이터 만들어줌
ex) $("#form").serialize();
결과 값 : name
name%EB%AC%B8%EC%BD%94%EB%94%A9&gender=F&age=20
2) serializeArray() : 선택된 폼 요소의 입력 필드 name 속성을 이용해 객체로 구성된 배열 생성
ex) $("#form").serializeArray();
결과 값 : [
{ name : "name", value : "홍길동" },
{ name : "gender", value : "M" },
{ name : "age", value : 10 }
]
3) $.param() : 객체 배열이나 객체를 인코딩된 폼 데이터로 만들어주는 메소드 (헬퍼 함수는 아님)
ex) var param1 = $("#form").serializeArray();
var param2 = {
name : "홍길동",
gender : "M",
age : 10
}
$.param(param1);
$.param(param1);
결과값 : name%EB%AC%B8%EC%BD%94%EB%94%A9&gender=F&age=20
3. 실습 - helper_function
<!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() {
//1) 인코딩된 폼 데이터 생성(x-www-form-urlencoded)
var param = $("#f1").serialize();
console.log(param);
console.log("----------------------------------------------------");
//2) 폼의 입력 필드를 배열 객체로 변환
var paramArr = $("#f1").serializeArray();
console.log(paramArr);
//json 문자열로 변환
console.log(JSON.stringify(paramArr));
//배열 객체를 인코딩된 폼 데이터로 변환(x-www-form-urlencoded)
console.log($.param(paramArr));
console.log("-----------------------------------------------------");
//3) 객체 생성
var paramObj = {
name : "홍길동",
gender : "M",
age : 10
};
console.log(paramObj);
//객체를 인코딩된 폼 데이터로 변환(x-www-form-urlencoded)
console.log($.param(paramObj));
});
});
</Script>
</body>
</html>
4. 실습 - helper_add
<!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="text" id="tel" name="tel"><br>
주소 : <input type="text" id="address" name="address"><br>
</form>
<button type="button" id="save">저장</button>
<Script>
$(document).ready(function() {
$("#save").click(function() {
//1) 인코딩된 폼 데이터 생성(x-www-form-urlencoded)
var param = $("#f1").serialize();
//ajax 호출
$.ajax({
//요청 서비스 url 지정
url : "/contact/add.do",
//메소드 타입 지정
type : "POST",
//요청 시 서버로 전달할 데이터 지정
data : param,
//요청 성공 시 동작할 콜백 함수 지정
success : function(data) {
console.log(data);
}
});
});
});
</Script>
</body>
</html>
5. 실습 - add_form
- form을 이용하여 데이터를 바로 추가할 수 있음
<!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" action="/contact/add.do" method="post">
이름 : <input type="text" id="name" name="name"><br>
전화 : <input type="text" id="tel" name="tel"><br>
주소 : <input type="text" id="address" name="address"><br>
<button type="submit" id="save">저장</button>
</form>
</body>
</html>
반응형
'💻 1. 웹개발_Front end > 1-7 Ajax' 카테고리의 다른 글
| [Ajax] 18. 기타 메소드 (0) | 2021.10.06 |
|---|---|
| [Ajax] 17. Ajax 전역 이벤트 함수 (0) | 2021.10.06 |
| [Ajax] 15. encoded_form_data (0) | 2021.10.06 |
| [Ajax] 14. jsPromise (콜백 지옥 해결법)과 jqWhen (0) | 2021.10.06 |
| [Ajax] 13. Ajax Callback 지옥 (0) | 2021.10.06 |
댓글