Ajax 방식 으로 폼 을 제출 하 는 일반적인 인 코딩 형식 요약

이전 글 (폼 제출 시 인 코딩 형식 enctype 상세 설명) 은 폼 속성 enctype 의 인 코딩 형식 을 소개 하 였 으 며, 오늘 은 Ajax 방식 으로 폼 을 제출 할 때 자주 사용 하 는 인 코딩 형식 을 말씀 드 리 겠 습 니 다.
Ajax 방식 으로 폼 을 제출 하고 인 코딩 유형 을 결정 하 는 것 은 요청 헤더 Content-Type 이 며, 서로 다른 값 은 서로 다른 제출 과 리 셋 처리 방식 에 대응 합 니 다.그리고 프로젝트 에서 저 희 는 전단 의 라 이브 러 리 나 프레임 워 크 를 사용 합 니 다. 그들 은 서로 다른 Content-Type 에 대해 서도 서로 다른 매개 변수 쓰기 방법 을 가지 고 있 습 니 다. 본 고 는 jQuery 와 AngularJS, 그리고 XML HttpRequest 의 총 세 가지 방식 을 예 로 들 어 서로 다른 Content-Type 의 전송 요청 방식 을 상세 하 게 소개 할 것 입 니 다.본 고 에서 고려 한 Content-Type 유형 은 모두 다음 과 같은 몇 가지 가 있다.

application/x-www-form-urlencoded

multipart/form-data

text/plain

application/json

text/xml

다음은 XML HttpRequest, jQuery, AngularJS 세 가지 비동기 제출 방식 과 대응 하 는 모든 Content - Type 유형 을 소개 합 니 다.
XML HttpRequest 방식
XML HttpRequest 대상 은 백 엔 드 에 데 이 터 를 보 내 는 데 사 용 됩 니 다. 현대 브 라 우 저 는 모두 지원 합 니 다. (IE 는 ActiveXObject 로 같은 기능 을 수행 하려 면 본 고 는 토론 하지 않 습 니 다)
후속 코드 는 XML HttpRequest 대상 을 얻 었 다 고 가정 합 니 다. 이름 은 req 입 니 다.다음은 XML HttpRequest 대상 이 흔히 볼 수 있 는 5 가지 Content-Type 로 데 이 터 를 보 내 는 방식 을 소개 한다.
application/x-www-form-urlencoded
이러한 Content-Type 은 데 이 터 를 key1=value1&key2=value2 의 형식 으로 백 엔 드 에 보 내 고 그 중의 특수 문 자 는 %HH 형식 으로 바 꿔 야 한다.
우선, encodeURIComponent() 함수 로 폼 데 이 터 를 인 코딩 해 야 합 니 다. 코드 는 다음 과 같 습 니 다.

/* data            ，dataToSend           */

var tempArr = [];
for (var key in data) {
    if (data.hasOwnProperty(key)) {
        tempArr.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
}

var dataToSend = tempArr.join('&');    

이 어 요청 머리 Content-Type 를 설정 하여 데 이 터 를 보 내 고 코드 는 다음 과 같 습 니 다.

req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(dataTosend);

multipart/form-data
이러한 Content-Type 형식 은 파일 을 제출 하 는 데 많이 사용 되 며, HTML 5 의 FormData 대상 을 이용 하여 제출 한 데 이 터 를 구축 합 니 다.FormData 대상 의 브 라 우 저 지원 상황 은 FormData 대상 의 브 라 우 저 지원 상황 을 보십시오.기본적으로 현대 브 라 우 저 는 모두 지원 합 니 다. IE 11 이하 에 서 는 지원 되 지 않 습 니 다. 지원 되 지 않 는 것 은 ajax Form 과 같은 jquery 파일 로 플러그 인 을 제출 하 는 것 을 권장 합 니 다.
우선, FormData 대상 으로 제출 하고 자 하 는 데 이 터 를 구축 합 니 다. 코드 는 다음 과 같 습 니 다.

/* data            ，dataToSend           */

var dataToSend = new FormData();      // HTML5  , IE11     
for (var key in data) {
    if (data.hasOwnProperty(key)) {
        dataToSend.append(key, data[key]);
    }
}

// dataToSend  FormData  ，       
dataToSend

이 어 백 엔 드 에 직접 보 내 고 이런 유형의 발송 방식 에 주의 하 며 요청 머리 Content-Type 를 설정 할 수 없 으 며 브 라 우 저 에 맡 겨 처리 해 야 한다 (Boundary 설정 등 작업).

req.send(dataToSend);

text/plain
요청 머리 가 설정 되 어 있 지 않 고 Content-Type 데이터 가 FormData 도 아니 고 XML Document (xml 소절 에 소 개 될 것) 이 라면 Content-Type 기본 값 은 text/plain 입 니 다.
이런 방식 의 코드 는 매우 간단 하 다. 직접 문자열 을 보 내 면 된다. 코드 는 다음 과 같다.

req.send('...(           )');

application/json
JSON 형식의 데 이 터 는 백 엔 드 와 각종 모 바 일 엔 드 가 편리 하 게 처리 되 며, 이러한 MIME 형식 을 사용 할 때 데이터 대상 을 JSON 문자열 로 변환 해 야 합 니 다.
우선 데 이 터 를 JSON 문자열 로 변환 합 니 다.그리고 요청 한 머리 Content-Type 를 설정 하면 데 이 터 를 보 낼 수 있 습 니 다.코드 는 다음 과 같 습 니 다.

/* data             */

req.send( JSON.stringify(data) );

text/xml
XML 을 사용 해 야 하 는 상황 은 없 었 고 대부분 JSON 으로 대 체 했 습 니 다. 온전 함 을 위해 저도 정리 하 겠 습 니 다.
우선 XML 문서 대상 을 구축 하고 폼 데 이 터 를 저장 합 니 다. 코드 는 다음 과 같 습 니 다.

/* data            ，dataToSend           */

var dataToSend = document.implementation.createDocument("", "formdata", null);
var tempData = dataToSend.documentElement;
for (var key in data) {
    if (data.hasOwnProperty(key)) {
        var keyElement = doc.createElement(key);
        keyElement.appendChild(doc.createTextNode(data[key]));
        tempData.appendChild(keyElement);
    }
}

/*
xml      ：

     value1 
     value2 

*/

이후 multipart/form-data 와 마찬가지 로 데 이 터 를 직접 보 내 고 설정 할 필요 가 없다 Content-Type.

req.send(dataToSend);

작은 매듭

multipart/form-data 와 text/xml 요청 헤드 를 설치 할 필요 가 없 는 Content-Type;

method 에 대해 이상 은 POST 방식 이 고 GET 방식 이 데이터 체 를 요청 하지 않 으 면 데 이 터 는 URL 뒤에 직접 추 가 됩 니 다.

첨부: 요청 을 받 을 때의 해석 방식

text / xml: 용 responseXML

application / json: JSON 화 JSON.parse( responseText )

기타: 바로 사용 responseText

jQuery 방식
application/x-www-form-urlencoded
jQuery 의 기본 폼 제출 방식 은 XML HttpRequest 와 다른 점 은 데이터 의 URL 방식 인 코딩 입 니 다. jQuery 가 합 니 다. $.ajax({}) 인자 에 설정 processData = true 만 하면 됩 니 다. (이것 도 기본 값 입 니 다. 생략 가능)
코드 는 다음 과 같 습 니 다.

/* dataToSend Object       ，  jQuery      */

$.ajax({
    method: 'POST',
    url: '...',
    data: dataToSend,
    
    contentType: 'application/x-www-form-urlencoded',    //    
    processData: true,        //    

    success: function() {...}
});

주의: GET 방식 을 사용 하면 method 을 GET 로 바 꾸 면 됩 니 다. url 뒤에 데 이 터 를 추가 하지 않 아 도 됩 니 다.
multipart/form-data
이런 MIME 형식의 제출 방식 은 파일 을 업로드 하 는 데 적합 하 다.
우선 폼 데이터 에 대해 FormData 를 구축 한 HTML 5 대상 의 코드 는 다음 과 같다.

/* dataToSend  FormData  ，             */

var dataToSend= new FormData();      // HTML5  , IE11     
for (var key in data) {
    if (data.hasOwnProperty(key)) {
        dataToSend.append(key, data[key]);
    }
}

이후 $.ajax() 방법 으로 데 이 터 를 전송 했다.메모: processData 와 contentType 는 false 로 설정 해 야 합 니 다. 전 자 는 FormData 대상 이 URL 인 코딩 으로 전환 되 는 것 을 피하 기 때 문 입 니 다. 후 자 는 브 라 우 저 로 multipart/form-data 유형의 boundary 를 추가 해 야 하기 때 문 입 니 다.

$.ajax({
    method: 'POST',
    url: '...',
    data: dataToSend,          // dataToSend  FormData  
    
    contentType: false,        // contentType      false
    processData: false,        // processData      false

    success: function() { ... }
});

text/plain
이 형식 으로 제출 하면 문자열 을 직접 전송 합 니 다.

$.ajax({
    method: 'POST',
    url: '...',
    data: dataToSend,         
    
    contentType: 'text/plain',       
    processData: false,        // processData    false      URL  

    success: function() { ... }
});

application/json
이 형식 으로 제출 하면 JSON 문자열 을 전송 하기 때문에 폼 데 이 터 를 함수 JSON.stringify() 로 처리 해 야 합 니 다.

/* data    Object      */

dataToSend = JSON.stringify(data);

$.ajax({
    method: 'POST',
    url: '...',
    data: dataToSend,         
    
    contentType: 'application/json',       
    processData: false,        // processData    false      URL  

    success: function() { ... }
});

메모: 백 엔 드 에서 도 JSON 문자열 을 되 돌려 줄 때 success 리 셋 함수 에서 받 은 데이터 매개 변 수 는 문자열 이 므 로 Object 형식 으로 변환 해 야 합 니 다.(앵 귤 러 는 필요 없다)

$.ajax({
...
    success: function(data) {
        var jsonData = JSON.parse(data);
        ...
    }
});

text/xml
우선 XML 문서 대상 을 구축 하고 폼 데 이 터 를 저장 합 니 다. 코드 는 다음 과 같 습 니 다.

/* data            ，dataToSend           */

var dataToSend = document.implementation.createDocument("", "formdata", null);
var tempData = dataToSend.documentElement;
for (var key in data) {
    if (data.hasOwnProperty(key)) {
        var keyElement = doc.createElement(key);
        keyElement.appendChild(doc.createTextNode(data[key]));
        tempData.appendChild(keyElement);
    }
}

/*
xml      ：

     value1 
     value2 

*/

이후 데이터 dataToSend 를 보 내 고 코드 는 다음 과 같 습 니 다.

$.ajax({
    method: 'POST',
    url: '...',
    data: dataToSend,
    
    contentType: false,    // contentType    false       'text/xml'     
    processData: false,    // processData     false
    
    success: function() { ... }
});

AngularJS 방식
application/x-www-form-urlencoded
이러한 MIME 형식 으로 폼 데 이 터 를 제출 하려 면 폼 데이터 에 대해 URL 인 코딩 을 해 야 합 니 다. $.param(data) 함수 로 코드 는 다음 과 같 습 니 다.

$http({
    method: 'POST',
    url: '...',
    data: $.param(dataToSend),
    headers: { 'Content-Type': 'application/x-www-form-urlencoded'}
).success(...);

multipart/form-data
우선 이 형식 이 파일 을 업로드 하려 면 Angular 가 파일 을 가 져 오기 위해 명령 어로 쓰 는 것 을 추천 합 니 다.코드 는 다음 과 같 습 니 다.

.directive("fileReader", [function () {
    return {
        restrict: 'AE',
        scope: {
            fileReader: "="        // HTML  file-reader           
        },
        link: function (scope, element) {
            element.bind("change", function (changeEvent) {
                scope.$apply(function () {
                    scope.fileReader = changeEvent.target.files[0];
                });
            });
        }
    }
}])

/* HTML     */

그 다음 에 FormData 대상 으로 폼 데 이 터 를 포장 하고 전송 해 야 하 며 $http 서비스의 transformRequest 옵션 에 쓰 는 것 을 권장 합 니 다.또한 jQuery 와 유사 한 요청 헤더 Content-Type 는 undefined 로 설정 해 야 합 니 다.코드 는 다음 과 같 습 니 다.

$http({
    method: 'POST',
    url: '...',
    data: dataToSend,
    headers: {
        'Content-Type': undefined               //      undefined
    },

    transformRequest: function(data) {
        var tempFormData = new FormData();      // HTML5  , IE11     
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                tempFormData.append(key, data[key]);
            }
        }
        return tempFormData;
    }
}).success(...)

text/plain
폼 데 이 터 를 문자열 로 제출 합 니 다. 코드 는 다음 과 같 습 니 다.

$http({
    method: 'POST',
    url: '...',
    data: dataToSend,
    headers: {
        'Content-Type': 'text/plain'
    }).success(...)

application/json
JSON 문자열 로 폼 데 이 터 를 제출 하고 JSON.stringify() 함수 로 변환 합 니 다. 코드 는 다음 과 같 습 니 다.

$http({
    method: 'POST',
    url: '...',
    data: JSON.stringify(dataToSend),
    headers: {
        'Content-Type': 'application/json'
    }).success(...)

주의: 그러나 success 함수 에서 받 아들 인 매개 변 수 는 Object 대상 입 니 다. jQuery 와 같이 JSON.parse() 로 전환 할 필요 가 없습니다.
text/xml multipart/form-data 와 유사 하 게 transformRequest 에 구축 XML Document 하고 요청 헤더 에 있 는 Content-Type 은 undefined 또는 text/xml 등 으로 설정 하 며 코드 는 다음 과 같다.

$http({
    method: 'POST',
    url: '...',
    data: dataToSend,
    headers: {
        'Content-Type': undefined               //    undefined 'text/xml' 
    },

    transformRequest: function(data) {
        var doc = document.implementation.createDocument("", "formdata", null);
        var tempData = doc.documentElement;
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                var keyElement = doc.createElement(key);
                keyElement.appendChild(doc.createTextNode(data[key]));
                tempData.appendChild(keyElement);
            }
        }
        return doc;
    }
}).success(...)

첨부: GET 방식 으로 폼 데이터 제출
Angular 는 GET 방식 으로 폼 데 이 터 를 제출 할 때 $http 서비스 params 가 아 닌 data 형식 으로 데 이 터 를 전송 해 야 한다. params 코드 는 다음 과 같다.

$http({
    method: 'GET',
    url: '...',
    params: dataToSend
}).success(...)