Ajax 관련 메서드
☞ Ajax는 클라이언트가 비동기식으로 자바스크립트를 이용하여 화면 전환 없이 서버 측에 자료(XML, HTML, JSON, 텍스트 유형 등)를 요청할 때 사용한다.
Ajax 관련 대표 메서드 : $.ajax() 메서드
$.ajax({
1. url : "전송 페이지"(action url), // 데이터를 전송하거나 혹은 데이터를 수신할 외부 URL 주소
2. type : "전송 방식"(get, post 방식), // 데이터 전송할 방식, 형태
3. data : "전송할 데이터", // 서버에 전송할 데이터
4. dataType : "요청한 데이터 형식" ("html","xml","json","text","jsonp"), //수신할 데이터 형식
5. success: function(data){ // 매개변수 data에는 수신한 데이터가 저장 된다.
"전송에 성공하면 실행 될 코드" // 데이터의 전송 및 요청이 정상적으로 이루어지면 함수 실행.
},
6. error: function(){
"전송에 실패하면 실행 될 코드"
}
});Ajax 관련 메서드 및 함수
☞ Ajax 호출하는 대표 메서드와 내장 함수
Ajax 관련 대표 내장 함수
1) serialize() 함수
: Form에 있는 모든 필드를 문자열 하나로 합치는 방식. 키/값 쌍을 '&' 문자로 구분한 형태.
2) serializeArray() 함수
: Form에 있는 모든 필드를 배열 객체로 변환해 반환하는 방식. 키/값 쌍을 [{name1:value1},{name2:value2}] 로 구분한 형태.
※ 예시 - SerializeArray 함수. Serialize 함수를 이용한 예시 소스
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
$(document).ready(function(){
});
function formSubmit(){
/*1. serialize() 함수*/
// var params = $("#formname1").serialize();
/*2. serializeArray() 함수*/
// var params = $("#formname1").serializeArray();
console.log(params);
};
</script>
</head>
<body>
<form name="formname1" id="formname1" style="margin:0px;">
<div>
<label for="fname">이름</label>
<input type="text" name="fname" id="fname" value="C.m.A"/>
</div>
<div>
<label for="femail">이메일</label>
<input type="text" name="femail" id="femain" value=""/>
</div>
<div>
<label for="sex">성별</label>
<input type="radio" name="sex" value="0"/>여자
<input type="radio" name="sex" value="1" checked="checked"/>남자
</div>
<div>
<label for="job">직업</label>
<select name="job" id="job">
<option value="직업1">직업1</option>
<option value="직업2">직업2</option>
<option value="직업3">직업3</option>
</select>
<!--./select-->
</div>
<div>
<input type="button" value="Ajax 폼 전송" onclick="formSubmit()"/>
</div>
</form>
<!--./form -->
</body>
|
cs |
'코딩테스트 > JavaScript' 카테고리의 다른 글
| [AJAX -09.제이쿼리 비동기 방식 연동 (P.307)] (0) | 2021.01.23 |
|---|---|
| 2.제이쿼리 (0) | 2020.12.12 |
| 2. 제이쿼리 (0) | 2020.11.22 |
| 1. 자바스크립트 - 함수 (0) | 2020.11.22 |
| [자바스크립트] 내장객체 - Slice (0) | 2020.09.12 |
