Job/Web
$.ajax() 메서드
reallllbro
2020. 7. 28. 00:42
$.ajax() 포멧
$.ajax({
url : "전송 페이지" (action url),
type : "전송 방식" (get, post방식),
data : "전송할 데이터",
dataType : "요청한 데이터 형식" ("html", "xml", "json", "text", "jsonp"),
success : function(data){
전송에 성공하면 실행될 코드;
},
error:function(){
전송에 실패하면 실행될 코드;
}
})
- url 에는 데이터 전송 및 요청할 외부 주소를 입력합니다
- type에는 전송 방식을 입력합니다.
- data에는 전송할 데이터를 입력합니다.
- dataType은 서버로부터 받아올 데이터 형식을 지정합니다. 데이터가 HTML일 경우에는 "html", XML일 경우에는 "xml", JSON일 경우에는 "json" 이라고 입력합니다.
- 데이터 전송 및 요청이 정상적으로 이뤄지면 함수가 실행됩니다. 이때 매개변수(result)에는 요청한 데이터가 저장됩니다.
$.ajax() 메서드의 옵션 종류
종류 | 설명 |
async | 통신을 동기 또는 비동기 방식으로 설정하는 옵션입니다. 기본값은 비동기 통신 방식인 true로 설정되어 있습니다. 만일 비동기 방식으로 설정되어 있다면 사용자 컴퓨터에서 서버로 데이터를 전송하고 요청하는 동안에도 다른 작업을 할 수 있습니다. |
beforeSend | 요청하기 전에 함수를 실행하는 이벤트 핸들러 입니다. |
cache | 요청한 페이지를 인터넷에 캐시(저장)할지의 여부를 설정합니다. 기본값은 true입니다. |
complete | Ajax가 완료되었을 때 함수를 실행하는 이벤트 핸들러 입니다. |
contentType | 서버로 전송할 데이터의 content-type을 설정하빈다. 기본값은 application/x-wwww-form-ur-lencoded 입니다 |
data | 서버로 전송할 데이터를 지정합니다. |
dataType | 서버에서 받아올 데이터의 형식을 지정합니다. 생략하면 요청한 자료에 맞게 자동으로 형식이 설정됩니다. |
error | 통신에 문제가 발생했을 때 함수를 실행합니다. |
success | Ajax로 통신이 정상적으로 이뤄지면 이벤트 핸들러를 실행합니다. |
timeout | 통신 시간을 제한합니다. 시간 단위는 밀리초입니다. |
type | 데이터를 전송할 방식(get/post)을 설정합니다. |
url | 데이터를 전송할 페이지를 설정합니다. 기본값은 현재 페이지 입니다. |
username | HTTP 액세스를 할 때 인증이 필요할 경우 사용자 이름을 지정합니다. |
Ajax 전송 데이터 가공 메서드의 종류
종류 | 사용법 | 설명 |
serialize() | $("form").serialize(); | 사용자가 입력 요소에 값을 입력한 데이터의 전송 방식을 name1=value1 & name2 = value2 와 같은 쿼리 스트링 형식의 데이터로 변환해 반환합니다. |
serializeArray() | $("form").serializeArray() | 사용자가 입력 요소에 값을 입력한 데이터의 전송방식을 [{name1:value2},{name2:value2}]와 같은 배열 객체로 변환해 반환 합니다. |
$.param() | $.param(Object); | {name1:value1, name2:value2}와 같이 작성된 객체를 가공해 name1=value1 & name2=value2 와 같은 쿼리 스트링 형식의 데이터로 변환해 반환합니다. |
JSON.parse() | JSON.parse('{"name":"value"}'); | 객체 형태로 작성한 문자열 데이터를 객체로 가공하여 반환합니다. JSON.parse() 메서드는 입력하는 자료형이 "객체 형태" 일 뿐 "문자열"의 데이터를 입력하여 객체를 반환합니다. |
JSON.stringify() | JSON.stringif({"name1":"value1" ,"name2":"value2"}) |
객체를 문자열 데이터로 가공하여 반환합니다. |