AngularJs $ http.post ()는 데이터를 보내지 않습니다


337

다음 진술이 왜 게시물 데이터를 지정된 URL로 보내지 않는지 아는 사람이 있습니까? URL이 호출되었지만 $ _POST를 인쇄하면 서버에서 빈 배열을 얻습니다. 데이터를 메시지에 추가하기 전에 콘솔에 메시지를 인쇄하면 올바른 내용이 표시됩니다.

$http.post('request-url',  { 'message' : message });

또한 데이터를 문자열로 사용하여 동일한 결과를 시도했습니다.

$http.post('request-url',  "message=" + message);

다음 형식으로 사용할 때 작동하는 것 같습니다.

$http({
    method: 'POST',
    url: 'request-url',
    data: "message=" + message,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});

그러나 $ http.post ()로 수행하는 방법이 있습니까? 그리고 작동하려면 항상 헤더를 포함해야합니까? 위의 내용 유형이 전송 된 데이터의 형식을 지정한다고 생각하지만 Javascript 객체로 보낼 수 있습니까?


URL의 출처가 동일합니까?
fmquaglia

죄송합니다-모든 예에서 동일한 URL입니다.
Spencer Mark

@SpencerMark 죄송합니다 .. 귀하의 작업 코드 위에서 시도했습니다 .. 그것은 나를 위해 작동하지 않습니다.
Arul Sidthan

답변:


346

asp.net MVC를 사용하는 것과 동일한 문제가 있었고 여기서 해결책을 찾았습니다.

이민자들에게 혼란이 많다 AngularJS 를 왜 $http서비스 속기 함수 ( $http.post()등)가 jQuery 등가 ( jQuery.post(), 등) 와 교체 될 수 없는지에 대해 이 있습니다 .

차이점은 jQuery 가 어떻게AngularJS 가 데이터를 직렬화하고 전송하는 방법에 있습니다. 기본적으로 문제는 선택한 서버 언어가 AngularJS의 전송을 기본적으로 이해할 수 없다는 데 있습니다. 기본적으로 jQuery 는 다음을 사용하여 데이터를 전송합니다.

Content-Type: x-www-form-urlencoded

익숙한 foo=bar&baz=moe직렬화.

그러나 AngularJS 는 다음을 사용하여 데이터를 전송합니다.

Content-Type: application/json 

{ "foo": "bar", "baz": "moe" }

불행히도 일부 웹 서버 언어 인 JSON 직렬화 특히 PHP와 같은 기본적으로 직렬화를 해제하지 않습니다.

매력처럼 작동합니다.

암호

// Your app's root module...
angular.module('MyModule', [], function($httpProvider) {
  // Use x-www-form-urlencoded Content-Type
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

  /**
   * The workhorse; converts an object to x-www-form-urlencoded serialization.
   * @param {Object} obj
   * @return {String}
   */ 
  var param = function(obj) {
    var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

    for(name in obj) {
      value = obj[name];

      if(value instanceof Array) {
        for(i=0; i<value.length; ++i) {
          subValue = value[i];
          fullSubName = name + '[' + i + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value instanceof Object) {
        for(subName in value) {
          subValue = value[subName];
          fullSubName = name + '[' + subName + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value !== undefined && value !== null)
        query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
    }

    return query.length ? query.substr(0, query.length - 1) : query;
  };

  // Override $http service's default transformRequest
  $httpProvider.defaults.transformRequest = [function(data) {
    return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
  }];
});

7
이 스크립트를 정자 bower install angular-post-fix --save-dev에 추가하고 추가하는 데 사용 했습니다.
Billy Blaze

PHP의 전송 데이터 방법을 변경하는 방법이 있습니다. 그것이 현재 내가 겪고있는 문제이기 때문입니다.
Demodave

1
이 코드는 대부분 훌륭하게 작동하지만 빈 객체의 계층 구조 또는 평평한 빈 값을 제출할 때 문제가 있습니다. 예를 들어, {a : 1, b : {c : {d : {}}}, e : undefined, f : null, g : 2}는 제대로 인코딩되지 않으며 PHP는 [ "a"= > "1", "g"=> "2"]. "b"아래의 전체 구조와 키 자체를 포함하여 "e"및 "f"는 손실됩니다. 아래의 대체 코드를 게시했는데, 위 구조는 다음과 같이 디코딩됩니다 : [ "a"=> "1", "b"=> [ "c"=> [ "d"=> ""]], "e" => "", "f"=> "", "g"=> "2"].
obe

1
multipart / form-data에 대해 어떻게 구현해야합니까?
davidlee

정말 :) 참 매력처럼 일했습니다. 나는 Spring MVC와 관련하여 문제에 직면했다
SKaul

115

위에서 명확하지는 않지만 PHP로 요청을 받으면 다음을 사용할 수 있습니다.

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

AngularJS POST에서 PHP의 배열에 액세스합니다.


3
$ _POST 배열을 덮어 쓸 때 배열에 강제로 적용하려면 true를 추가해야했습니다. json_decode(file_get_contents('php://input'), true);
Jon

4
@Zalaboza, 나는 '유니버설'로 간주되는 솔루션을 얻는 것이 어렵다는 데 동의하지만 그것이 'hacky'라는 것에 동의하지 않습니다. OS에서 지원하는 경우 메모리 매핑 기술을 사용하여 성능을 향상시킵니다. " 이 상황에서 파일을 읽지 않지만 그럼에도 불구하고 게시 된 json 데이터를 읽습니다. 독자 (나 자신 포함)가 이에 대해 더 나은 결정을 내릴 수 있도록 새로운 답변을 제공하거나 새로운 정보를 제공 할 수 있다면 좋을 것입니다.
Don F

78

다음과 같이 기본 "Content-Type"을 설정할 수 있습니다.

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

data형식에 관하여 :

$ http.post 및 $ http.put 메소드는 JavaScript 오브젝트 (또는 문자열) 값을 데이터 매개 변수로 승인합니다. 데이터가 JavaScript 객체 인 경우 기본적으로 JSON 문자열로 변환됩니다.

이 변형을 사용해보십시오

function sendData($scope) {
    $http({
        url: 'request-url',
        method: "POST",
        data: { 'message' : message }
    })
    .then(function(response) {
            // success
    }, 
    function(response) { // optional
            // failed
    });
}

9
작동하지 않는 것 같습니다. 방금 데이터를 문자열 및 : 헤더로 변경하려고 시도했습니다. 헤더 : { 'Content-Type': 'application / x-www-form-urlencoded'}-작동하는 것처럼 보이지만 더 나은 방법이 있습니까? 그것?
스펜서 마크

2
위에서 설명한대로 기본 컨텐츠 유형을 설정하고 데이터에는 js 오브젝트를 사용하지 않습니다. 다음과 같은 문자열을 사용하십시오 : 'message ='+ message Works for me
gSorry

58

비슷한 문제가 있었는데 이것이 유용 할 수 있는지 궁금합니다. https://stackoverflow.com/a/11443066

var xsrf = $.param({fkey: "key"});
$http({
    method: 'POST',
    url: url,
    data: xsrf,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

문안 인사,


헤더가 필요한 유일한 변경 인 것 같습니다. 감사합니다!
Ben Guthrie

고마워, 그것은 나를 위해 그것을했다 :) 문제는 POST 데이터의 인코딩이었습니다.
Daan

33

객체를 포스트 매개 변수로 변환하는 함수를 사용하고 싶습니다.

myobject = {'one':'1','two':'2','three':'3'}

Object.toparams = function ObjecttoParams(obj) {
    var p = [];
    for (var key in obj) {
        p.push(key + '=' + encodeURIComponent(obj[key]));
    }
    return p.join('&');
};

$http({
    method: 'POST',
    url: url,
    data: Object.toparams(myobject),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

30

이것은 $ httpParamSerializerJQLike를 사용하여 각도 1.4에서 마침내 해결되었습니다.

https://github.com/angular/angular.js/issues/6039를 참조 하십시오

.controller('myCtrl', function($http, $httpParamSerializerJQLike) {
$http({
  method: 'POST',
  url: baseUrl,
  data: $httpParamSerializerJQLike({
    "user":{
      "email":"wahxxx@gmail.com",
      "password":"123456"
    }
  }),
  headers:
    'Content-Type': 'application/x-www-form-urlencoded'
})})

POST 문제 192.168.225.75:7788/procure/p/search 400 (잘못된 요청)
Anuj

19

AngularJS post requrest 와 함께 jQuery 매개 변수 를 사용 합니다. 다음은 HTML 코드에서 정의 된 AngularJS 애플리케이션 모듈을 만드는 예제 입니다.myappng-app

var app = angular.module('myapp', []);

이제 로그인 컨트롤러와 POST 이메일 및 비밀번호를 생성하겠습니다.

app.controller('LoginController', ['$scope', '$http', function ($scope, $http) {
    // default post header
    $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
    // send login data
    $http({
        method: 'POST',
        url: 'https://example.com/user/login',
        data: $.param({
            email: $scope.email,
            password: $scope.password
        }),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function (data, status, headers, config) {
        // handle success things
    }).error(function (data, status, headers, config) {
        // handle error things
    });
}]);

코드를 설명하고 싶지는 않습니다. 이해하기 쉽습니다. : paramjQuery에서 가져온 것이므로 jQuery와 AngularJS를 모두 설치해야 작동합니다. 다음은 스크린 샷입니다.

여기에 이미지 설명을 입력하십시오

이것이 도움이 되길 바랍니다. 감사!


10

AngularJS와 Node.js + Express 4 + 라우터에서 같은 문제가 발생했습니다.

라우터는 본문의 게시물 요청 데이터를 예상합니다. Angular Docs의 예제를 따르면이 본문은 항상 비어있었습니다.

표기법 1

$http.post('/someUrl', {msg:'hello word!'})

하지만 데이터에서 사용하면

표기법 2

$http({
       withCredentials: false,
       method: 'post',
       url: yourUrl,
       headers: {'Content-Type': 'application/x-www-form-urlencoded'},
       data: postData
 });

편집 1 :

그렇지 않으면 node.js 라우터는 표기법 1을 사용하는 경우 req.body의 데이터를 예상합니다.

req.body.msg

또한 정보를 JSON 페이로드로 보냅니다. 이것은 json에 배열이 있고 x-www-form-urlencoded에 문제가있는 경우에 더 좋습니다.

효과가있었습니다. 도움이 되길 바랍니다.


10

JQuery와는 달리, Angular는 클라이언트에서 서버 POST 데이터 전송에 JSON 형식을 사용 합니다 (JQuery와 Angular는 데이터 imput에 JSON을 사용하지만 x-www-form-urlencoded를 적용합니다). 따라서 문제의 두 부분이 있습니다 : js 클라이언트 부분과 서버 부분. 따라서 다음이 필요합니다.

  1. 다음과 같이 js Angular 클라이언트 부분을 넣으십시오.

    $http({
    method: 'POST',
    url: 'request-url',
    data: {'message': 'Hello world'}
    });

  1. 클라이언트로부터 데이터를 받기 위해 서버 부분에 작성하십시오 (php 인 경우).

            $data               = file_get_contents("php://input");
            $dataJsonDecode     = json_decode($data);
            $message            = $dataJsonDecode->message;
            echo $message;     //'Hello world'

참고 : $ _POST는 작동하지 않습니다!

이 솔루션은 저를 위해, 희망적으로, 당신을 위해 작동합니다.


8

$httpangularjs로 Post 메소드를 통해 데이터를 보내려면 변경해야합니다.

data: "message=" + messagedata: $.param({message:message})


1
AngularJS 포스트 데이터를 보낼 때 왜 data : $ .param이 필요합니까?
blue-sky

7

@ felipe-miosso의 답변을 바탕으로 :

  1. 여기 에서 AngularJS 모듈로 다운로드 하십시오 .
  2. 설치
  3. 응용 프로그램에 추가하십시오.

    var app = angular.module('my_app', [ ... , 'httpPostFix']);

6

나는 언급 할 평판이 없지만 Don F의 답변에 대한 답변 / 추가로 :

$params = json_decode(file_get_contents('php://input'));

연관 배열을 올바르게 리턴하려면 의 두 번째 매개 변수를 함수에 true추가해야합니다 json_decode.

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


6

모난

  var payload = $.param({ jobId: 2 });

                this.$http({
                    method: 'POST',
                    url: 'web/api/ResourceAction/processfile',
                    data: payload,
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                });

WebAPI 2

public class AcceptJobParams
        {
            public int jobId { get; set; }
        }

        public IHttpActionResult ProcessFile([FromBody]AcceptJobParams thing)
        {
            // do something with fileName parameter

            return Ok();
        }

5

이 코드는 나를 위해 문제를 해결했습니다. 응용 프로그램 수준의 솔루션입니다.

moduleName.config(['$httpProvider',
  function($httpProvider) {
    $httpProvider.defaults.transformRequest.push(function(data) {
        var requestStr;
        if (data) {
            data = JSON.parse(data);
            for (var key in data) {
                if (requestStr) {
                    requestStr += "&" + key + "=" + data[key];
                } else {
                    requestStr = key + "=" + data[key];
                }
            }
        }
        return requestStr;
    });
    $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
  }
]);

5

이것을 js 파일에 추가하십시오.

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

이것을 서버 파일에 추가하십시오.

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

작동합니다.


4

나는 또한 비슷한 문제에 직면했고 나는 이와 같은 일을하고 있었고 작동하지 않았다. 스프링 컨트롤러가 데이터 매개 변수를 읽을 수 없습니다.

var paramsVal={data:'"id":"1"'};
  $http.post("Request URL",  {params: paramsVal});  

그러나이 포럼과 API Doc을 읽으면 다음과 같은 방법으로 시도해 보았습니다. 일부 문제가 비슷한 경우 아래 방법으로 시도해 볼 수 있습니다.

$http({
      method: 'POST',
      url: "Request URL",           
      params: paramsVal,
      headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}
            });

param config의 기능에 대해서는 https://docs.angularjs.org/api/ng/service/ $ http # post를 확인 하십시오 . {data : ' "id": "1"'} – URL로 변환 될 문자열 또는 객체의 맵? data = "id : 1"


4

이것은 아마도 늦은 대답이지만 가장 적절한 방법은 "get"요청을 할 때 동일한 코드 각도 사용을 사용하는 $httpParamSerializer것입니다. Jquery를 전혀 사용하지 마십시오. $http.post(url,$httpParamSerializer({param:val}))

app.controller('ctrl',function($scope,$http,$httpParamSerializer){
    $http.post(url,$httpParamSerializer({param:val,secondParam:secondVal}));
}

4

내 경우에는 다음과 같이 문제를 해결합니다.

var deferred = $q.defer();

$http({
    method: 'POST',
    url: 'myUri', 
    data: $.param({ param1: 'blablabla', param2: JSON.stringify(objJSON) }),
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(
    function(res) {
        console.log('succes !', res.data);
        deferred.resolve(res.data);
    },
    function(err) {
        console.log('error...', err);
        deferred.resolve(err);
    }
);
return deferred.promise;

JSON 객체를 포함하는 각 매개 변수에 대해 JSON.stringify를 사용한 다음 "$ .param":-)을 사용하여 데이터 객체를 빌드해야합니다.

NB : 내 "objJSON"은 배열, 정수, 문자열 및 html 컨텐츠를 포함하는 JSON 객체입니다. 그의 총 크기는> 3500 자입니다.


3

나는 대답 을 받아 들였다 는 것을 안다 . 그러나 다음과 같은 대답이 어떤 이유로 든 적합하지 않으면 다음 독자에게 도움이 될 수 있습니다.

Angular는 jQuery와 동일한 아약스를 수행하지 않습니다. 가이드를 따라 angular를 수정하려고 시도하는 동안 $httpprovider다른 문제가 발생했습니다. 예를 들어 $this->input->is_ajax_request()함수가 항상 실패한 codeigniter를 사용합니다 (다른 프로그래머가 작성했으며 전역 적으로 사용되었으므로 변경할 수 없음). 이것은 실제 아약스 요청이 아니라고 말합니다.

이를 해결하기 위해 연기 된 약속을 도왔습니다 . Firefox 및 ie9에서 테스트했으며 작동했습니다.

각도 코드 외부에 다음 함수가 정의되어 있습니다. 이 함수는 정기적 인 jquery ajax 호출을 수행하고 지연 / 약속 (아직 학습 중) 객체를 반환합니다.

function getjQueryAjax(url, obj){
    return $.ajax({
        type: 'post',
        url: url,
        cache: true,
        data: obj
    });
}

그런 다음 다음 코드를 사용하여 각도 코드라고합니다. 를 사용하여 $scope수동으로 업데이트 해야 $scope.$apply()합니다.

    var data = {
        media: "video",
        scope: "movies"
    };
    var rPromise = getjQueryAjax("myController/getMeTypes" , data);
    rPromise.success(function(response){
        console.log(response);
        $scope.$apply(function(){
            $scope.testData = JSON.parse(response);
            console.log($scope.testData);
        });
    }).error(function(){
        console.log("AJAX failed!");
    });

이것은 완벽한 대답은 아니지만 jquery ajax 호출을 각도로 사용하고를 업데이트 할 수있었습니다 $scope.


2
Angular는 1.3 이후로 $ q라는 약속 서비스를 소유하고 있습니다. 게시물에 JQuery를 사용할 필요가 없습니다.
mbokil

3

Express에서 동일한 문제가 발생했습니다. http 요청을 보내기 전에 bodyparser를 사용하여 json 객체를 구문 분석해야합니다.

app.use(bodyParser.json());

3

각도 js와 함께 아래 코드가 작동하는 asp.net WCF 웹 서비스를 사용하고 있습니다.

 $http({
        contentType: "application/json; charset=utf-8",//required
        method: "POST",
        url: '../../operation/Service.svc/user_forget',
        dataType: "json",//optional
        data:{ "uid_or_phone": $scope.forgettel, "user_email": $scope.forgetemail },
        async: "isAsync"//optional

       }).success( function (response) {

         $scope.userforgeterror = response.d;                    
       })

도움이 되길 바랍니다.


3

$ http.post 메소드를 사용하여 서버로 데이터를 전송하는 방법과이 경우 작동하지 않는 이유에 대한 완전한 코드 스 니펫을 찾지 못했습니다.

아래 코드 스 니펫에 대한 설명 ...

  1. jQuery $ .param 함수를 사용하여 JSON 데이터를 www 게시물 데이터로 직렬화합니다.
  2. angularJS $ http.post 요청과 함께 전달 될 구성 변수에 Content-Type을 설정하여 서버에 www post 형식으로 데이터를 전송하도록 지시합니다.

  3. $ htttp.post 메소드를 주목하십시오. 여기서 첫 번째 매개 변수를 url로, 두 번째 매개 변수를 데이터 (직렬화)로, 세 번째 매개 변수를 구성으로 보냅니다.

나머지 코드는 스스로 이해합니다.

$scope.SendData = function () {
           // use $.param jQuery function to serialize data from JSON 
            var data = $.param({
                fName: $scope.firstName,
                lName: $scope.lastName
            });

            var config = {
                headers : {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                }
            }

            $http.post('/ServerRequest/PostDataResponse', data, config)
            .success(function (data, status, headers, config) {
                $scope.PostDataResponse = data;
            })
            .error(function (data, status, header, config) {
                $scope.ResponseDetails = "Data: " + data +
                    "<hr />status: " + status +
                    "<hr />headers: " + header +
                    "<hr />config: " + config;
            });
        };

여기서 $ http.post 메소드 의 코드 예제를 보십시오 .



3

사용하는 경우 각도> = 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

TL; DR

연구 중에이 문제에 대한 답은 여러 가지 맛으로 나옵니다. 일부는 매우 복잡하고 사용자 정의 함수에 의존하고 일부는 jQuery에 의존하며 일부는 헤더를 설정하기 만하면 불완전합니다.

Content-Type헤더를 설정하면 끝점에 POST 데이터가 표시되지만 문자열을 제공하지 않으면 표준 형식이 아닙니다.data 하거나 데이터 객체를 수동으로 직렬화 기본값이며 엔드 포인트에서 잘못 해석 될 수 있습니다.

예를 들어, 위의 예제에서 올바른 시리얼 라이저를 설정하지 않으면 엔드 포인트에서 다음과 같이 표시됩니다.

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

그리고 예기치 않은 구문 분석이 발생할 수 있습니다. 예를 들어 ASP.NET은이를 null매개 변수 이름 으로 취급합니다 {"param1":"value1","param2":"value2"}. 또는 Fiddler는 다른 방법으로 {"param1":"value1","param2":"value2"}매개 변수 이름과 null값 으로 해석합니다 .


3

OP $http.post대신 제안 된 작업 형식 및 Denison의 대답과 유사하지만 대신 대신 사용하고 $httpjQuery에 여전히 의존합니다.

여기서 jQuery를 사용하는 좋은 점은 복잡한 객체가 제대로 전달된다는 것입니다. 데이터를 손상시킬 수있는 URL 매개 변수로 수동 변환하지 않아야합니다.

$http.post( 'request-url', jQuery.param( { 'message': message } ), {
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});

2

이 문제가 발생했을 때 게시 한 매개 변수는 간단한 객체 대신 객체 배열로 밝혀졌습니다.


2

각도 1.2에서 1.3으로 방금 업데이트되어 코드에서 문제를 발견했습니다. $ promise가 동일한 객체를 다시 보유하기 때문에 자원을 변환하면 무한 루프가 발생합니다. 어쩌면 누군가를 도울 것입니다 ...

나는 그것을 고칠 수있다 :

[...]
  /**
 * The workhorse; converts an object to x-www-form-urlencoded serialization.
 * @param {Object} obj
 * @return {String}
 */
var param = function (obj) {
var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

angular.forEach(obj, function(value, name) {
+    if(name.indexOf("$promise") != -1) {
+        return;
+    }

    value = obj[name];
    if (value instanceof Array) {
        for (i = 0; i < value.length; ++i) {
[...]

2

나는 받아 들여진 답변 코드 (Felipe의 코드)를 잠시 동안 사용해 왔으며 훌륭하게 작동했습니다 (감사합니다, Felipe!).

그러나 최근에 빈 객체 또는 배열에 문제가 있음을 발견했습니다. 예를 들어,이 객체를 제출할 때 :

{
    A: 1,
    B: {
        a: [ ],
    },
    C: [ ],
    D: "2"
}

PHP는 B와 C를 전혀 보지 못하는 것 같습니다. 그것은 이것을 얻는다 :

[
    "A" => "1",
    "B" => "2"
]

Chrome의 실제 요청을 보면 다음과 같습니다.

A: 1
:
D: 2

대체 코드 스 니펫을 작성했습니다. 내 유스 케이스에서 잘 작동하는 것 같지만 광범위하게 테스트하지 않았으므로주의해서 사용하십시오.

강력한 타이핑을 좋아하기 때문에 TypeScript를 사용했지만 순수한 JS로 쉽게 변환 할 수 있습니다.

angular.module("MyModule").config([ "$httpProvider", function($httpProvider: ng.IHttpProvider) {
    // Use x-www-form-urlencoded Content-Type
    $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";

    function phpize(obj: Object | any[], depth: number = 1): string[] {
        var arr: string[] = [ ];
        angular.forEach(obj, (value: any, key: string) => {
            if (angular.isObject(value) || angular.isArray(value)) {
                var arrInner: string[] = phpize(value, depth + 1);
                var tmpKey: string;
                var encodedKey = encodeURIComponent(key);
                if (depth == 1) tmpKey = encodedKey;
                else tmpKey = `[${encodedKey}]`;
                if (arrInner.length == 0) {
                    arr.push(`${tmpKey}=`);
                }
                else {
                    arr = arr.concat(arrInner.map(inner => `${tmpKey}${inner}`));
                }
            }
            else {
                var encodedKey = encodeURIComponent(key);
                var encodedValue;
                if (angular.isUndefined(value) || value === null) encodedValue = "";
                else encodedValue = encodeURIComponent(value);

                if (depth == 1) {
                    arr.push(`${encodedKey}=${encodedValue}`);
                }
                else {
                    arr.push(`[${encodedKey}]=${encodedValue}`);
                }
            }
        });
        return arr;
    }

    // Override $http service's default transformRequest
    (<any>$httpProvider.defaults).transformRequest = [ function(data: any) {
        if (!angular.isObject(data) || data.toString() == "[object File]") return data;
        return phpize(data).join("&");
    } ];
} ]);

Felipe의 코드보다 효율적이지 않지만 HTTP 요청 자체의 전체 오버 헤드와 비교하여 즉각적으로 이루어져야하기 때문에 중요하지 않다고 생각합니다.

이제 PHP는 다음을 보여줍니다.

[
    "A" => "1",
    "B" => [
        "a" => ""
    ],
    "C" => "",
    "D" => "2"
]

내가 아는 한 PHP가 Ba와 C가 빈 배열임을 인식하는 것은 불가능하지만 적어도 키가 나타납니다. 이것은 본질적으로 비어있는 경우에도 특정 구조에 의존하는 코드가있을 때 중요합니다.

또한 정의되지 않은 s 및 null 을 빈 문자열 로 변환 합니다.


JavaScript로 POO를 코딩하는 가장 좋은 방법은 TypeScript입니다!
Disfigure

2

보내려는 데이터를 두 번째 매개 변수로 넣으십시오.

$http.post('request-url',  message);

또한 작동하는 다른 형식은 다음과 같습니다.

$http.post('request-url',  { params: { paramName: value } });

확인하십시오 paramName호출하는 함수의 매개 변수 이름과 정확히 일치 .

출처 : AngularJS 포스트 바로 가기 방법


5
왜이 답변이 투표에 실패했는지 설명 할 수 있습니까?
Marco Lackovic

1
이 솔루션에 투표권을 행사할 수
ainasiart

1

아래 코드 로이 문제를 해결했습니다.

클라이언트 측 (Js) :

     $http({
                url: me.serverPath,
                method: 'POST',
                data: data,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            }).
                success(function (serverData) {
                    console.log("ServerData:", serverData);
    ......

데이터는 객체입니다.

서버 (ASP.NET MVC)에서 :

[AllowCrossSiteJson]
        public string Api()
        {
            var data = JsonConvert.DeserializeObject<AgentRequest>(Request.Form[0]);
            if (data == null) return "Null Request";
            var bl = Page.Bl = new Core(this);

            return data.methodName;
        }

교차 도메인 요청에는 'AllowCrossSiteJsonAttribute'가 필요합니다.

public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
            base.OnActionExecuting(filterContext);
        }
    }

이것이 도움이 되었기를 바랍니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.