프론트
Ajax (+JQuery)
짱코딩러
2022. 11. 5. 22:26
<script>
$.ajax({
url:"전송 페이지"(action url),
type:"전송 방식"(get, post 방식),
data:"전송할 데이터",
dataType:"요청한 데이터 형식"("html","xml","json","text","jsonp"),
success:function(data){
전송에 성공하면 실행될 코드;
},
error: function(){
전송에 실패하면 실행될 코드;
}
});
</script>
$.ajax메서드
종류 | 설명 |
async | 통신을 동기 또는 비동기 방식으로 설정하는 옵션이다. 기본값은 비동기 통신 방식인 true로 설정되어 있다. 만일 비동기 방식으로 설정되어 있다면 사용자 컴퓨터에서 서버로 데이터를 전송하고 요청하는 동안에도 다른 작업을 할 수 있다. |
beforeSend | 요청하기 전에 함수를 실행하는 이벤트 핸들러이다. |
cache | 요청한 페이지를 인터넷에 캐시(저장)할지의 여부를 설정한다. 기본값은 true이다. |
complete | Ajax가 완료되었을 때 함수를 실행하는 이벤트 핸들러이다. |
contentType | 서버로 전송할 데이터의 content-type을 설정한다. 기본값은 application/x-www-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:value1},{name2:value2}]와 같은 배열 객체로 변환해 반환한다. |
$.param() | $.param(Object); | {name1 : value1, name2 : value2}와 같이 작성된 객체를 가공해 'name1=value1 & name2=value2, ... '와 같은 쿼리스트링 형식의 데이터로 변환해 반환한다. |
JSON.parse() | JSON.parse('{"name":"value"}'); | 객체 형태로 작성한 문자열 데이터를 객체로 가공하여 반환한다. (입력하는 자료형이 객체형태일뿐, 문자열의 데이터를 입력하여 객체를 반환한다.) |
JSON.stringify() | JSON.stringify({"name1":"value1","name2":'value2"}) | 객체를 문자열 데이터로 가공하여 반환한다. |