[javascript] AngularJS-$ http.post가 JSON 대신 요청 매개 변수를 보내는 방법은 없나요?

Program / 글쓴이

jQuery의 post 메서드를 통해 AJAX POST 요청을 만드는 오래된 코드가 있으며 다음과 같습니다.

$.post("/foo/bar", requestData,
    function(responseData)
    {
        //do stuff with response
    }

requestData 기본적인 문자열 속성이있는 자바 스크립트 객체 일뿐입니다.

저는 Angular를 사용하기 위해 우리의 물건을 옮기는 과정에 있으며,이 호출을 $ http.post로 바꾸고 싶습니다. 나는 다음을 생각 해냈다.

$http.post("/foo/bar", requestData).success(
    function(responseData) {
        //do stuff with response
    }
});

이 작업을 수행했을 때 서버에서 500 오류 응답을 받았습니다. Firebug를 사용하여 다음과 같은 요청 본문을 보냈습니다.

{"param1":"value1","param2":"value2","param3":"value3"}

성공적인 jQuery $.post는 다음과 같이 본문을 보냅니다.

param1=value1&param2=value2&param3=value3

내가 치는 엔드 포인트는 JSON이 아닌 요청 매개 변수를 예상하고 있습니다. 그래서, 내 질문은 어쨌든 $http.postJSON 대신 요청 매개 변수로 자바 스크립트 개체를 보내 라고 말할 수 있습니까? 예, 객체에서 직접 문자열을 구성 할 수 있다는 것을 알고 있지만 Angular가이를 위해 즉시 사용할 수있는 것이 있는지 알고 싶습니다.

답변

params구성 매개 변수가 본문 대신 URL에 문자열을 추가하기 때문에 여기에서 작동하지 않을 것이라고 생각 하지만 여기에서 Infeligo가 제안한 내용을 추가하는 것은 기본 변환의 전역 재정의 예제입니다 (jQuery 매개 변수 를 변환하는 예제로 사용). 매개 변수 문자열에 대한 데이터).

전역 transformRequest 함수를 설정합니다.

var app = angular.module('myApp');

app.config(function ($httpProvider) {
    $httpProvider.defaults.transformRequest = function(data){
        if (data === undefined) {
            return data;
        }
        return $.param(data);
    }
});

이렇게하면 $ http.post에 대한 모든 호출이 자동으로 본문을 jQuery $.post호출에서 사용하는 것과 동일한 매개 변수 형식으로 변환합니다 .

호출 당 또는 다음과 같이 전역 적으로 Content-Type 헤더를 설정할 수도 있습니다.

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

호출 당 샘플 비전 역 transformRequest :

    var transform = function(data){
        return $.param(data);
    }

    $http.post("/foo/bar", requestData, {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
        transformRequest: transform
    }).success(function(responseData) {
        //do stuff with response
    });

답변

Angular> = 1.4를 사용하는 경우 사용자 지정 또는 외부에 의존하지 않는 가장 깨끗한 솔루션은 다음과 같습니다.

angular.module('yourModule')
  .config(function ($httpProvider, $httpParamSerializerJQLikeProvider){
    $httpProvider.defaults.transformRequest.unshift($httpParamSerializerJQLikeProvider.$get());
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';
});

그런 다음 앱 어디에서나이 작업을 수행 할 수 있습니다.

$http({
  method: 'POST',
  url: '/requesturl',
  data: {
    param1: 'value1',
    param2: 'value2'
  }
});

그리고 엔드 포인트에 대한 POST 요청에서 일반적으로 예상되는대로 데이터를 올바르게 직렬화하고 Content-Type 헤더 와 함께 param1=value1&param2=value2전송 합니다./requesturlapplication/x-www-form-urlencoded; charset=utf-8

답변

AngularJS 문서에서 :

params – {Object.} – URL 뒤에? key1 = value1 & key2 = value2로 바뀔 문자열 또는 개체의 맵입니다. 값이 문자열이 아닌 경우 JSON으로 처리됩니다.

따라서 문자열을 매개 변수로 제공하십시오. 원하지 않으면 변환을 사용하십시오. 다시 말하지만, 문서에서 :

이러한 변환을 로컬로 재정의하려면 변환 함수를 config 개체의 transformRequest 및 / 또는 transformResponse 속성으로 지정합니다. 기본 변환을 전역 적으로 재정의하려면 $ httpProvider의 $ httpProvider.defaults.transformRequest 및 $ httpProvider.defaults.transformResponse 속성을 재정의합니다.

자세한 내용은 설명서 를 참조하십시오.

답변

jQuery의 $.param함수를 사용 하여 requestData에서 JSON 데이터를 직렬화합니다.

요컨대, 유사한 코드를 사용하십시오.

$http.post("/foo/bar",
$.param(requestData),
{
    headers:
    {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
}
).success(
    function(responseData) {
        //do stuff with response
    }
});

이를 사용하려면 AngularJS와 함께 페이지에 jQuery를 포함해야합니다.

답변

Angular 1.4부터는 jQuery를 사용하지 않고도 양식 데이터를 직렬화 할 수 있습니다.

app.js에서 :

module.run(function($http, $httpParamSerializerJQLike) {
  $http.defaults.transformRequest.unshift($httpParamSerializerJQLike);
});

그런 다음 컨트롤러에서 :

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

답변

이것은 약간의 해킹 일 수 있지만 문제를 피하고 json을 서버 측에서 PHP의 POST 배열로 변환했습니다.

$_POST = json_decode(file_get_contents('php://input'), true);

답변

$ resource가 요청을 캐시하기 때문에 사용자 지정 http 인증을 설정하는 데 문제가 있습니다.

작동하게하려면이 작업을 수행하여 기존 헤더를 덮어 써야합니다. 

var transformRequest = function(data, headersGetter){
  var headers = headersGetter();
  headers['Authorization'] = 'WSSE profile="UsernameToken"';
  headers['X-WSSE'] = 'UsernameToken ' + nonce
  headers['Content-Type'] = 'application/json';
};

return $resource(
  url,
    {
    },
    {
      query: {
        method: 'POST',
        url: apiURL + '/profile',
        transformRequest: transformRequest,
        params: {userId: '@userId'}
      },
    }
);

누군가를 도울 수 있었기를 바랍니다. 이걸 알아내는 데 3 일이 걸렸습니다.