본문 바로가기

Job/Web

$.ajax() 메서드

$.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"})
객체를 문자열 데이터로 가공하여 반환합니다.