자바스크립트/JQuery

[Jquery] AJAX 데이터 전송

포포015 2021. 3. 9. 17:14

1. JSON 형태 데이터 전송

1
2
3
4
5
6
7
8
9
10
$.ajax({
    url: '데이터를 보낼 url',
    type: 'method속성 (post,get,delete,put)...,
    data: {"키" : "값"},
    success: function (data){
        alert("데이터전송 성공");
    },
    error: function (error){
        alert("에러");
    }
cs

 

2. 폼 데이터를 한꺼번에 전송

1
2
3
4
5
6
7
8
9
10
11
12
var queryString = $('#폼id').serialize();
 
$.ajax({
    url: '데이터를 보낼 url',
    type: 'method속성 (post,get,delete,put)...,
    data: {"키" : queryString },
    success: function (data){
        alert("데이터전송 성공");
    },
    error: function (error){
        alert("에러");
    }
cs

 

3.체크박스 데이터등 배열형태로 데이터 전송

(배열 형태의 데이터를 전송할때는 배열데이터를 직렬화 하는 코드를 작성해야함.) 

1
2
3
4
5
6
7
8
9
10
11
12
13
var array = {1,2,3,4,5};
jQuery.ajaxSettings.traditional = true; // 배열데이터 직렬화
 
$.ajax({
    url: '데이터를 보낼 url',
    type: 'method속성 (post,get,delete,put)...,
   data: {"키" : array},
    success: function (data){
        alert("데이터전송 성공");
    },
    error: function (error){
        alert("에러");
    }
cs

 

-----

ajax 옵션

 

* type : GET,POST 타입지정

* url : 대상 url 지정

* data : 서버로 전송할 파라미터 

* complete : ajax통신이 완료(success or error)된후 호출

* contentType : 서버로 보낼때 데이터형식

* dataType : 서버에서 반환되는 데이터형식 지정

* success : 요청이 성공할경우 호출

* error : 요청이 실패할경우 호출

 

더 많은 옵션은 아래 링크를 참조

api.jquery.com/jQuery.ajax/