AngularJs $ http.post（）はデータを送信しません

次のステートメントが投稿データを指定された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オブジェクトとして送信できますか？

私は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シリアライゼーションは、残念ながら一部のWebサーバー言語（特に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;
  }];
});

上記は明確ではありませんが、PHPでリクエストを受け取っている場合は、次のコードを使用できます。

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

AngularJS POSTからPHPの配列にアクセスします。

次のように、デフォルトの「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
    });
}

私は同様の問題を抱えていましたが、これも役立つのではないかと思います：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'}
})

よろしく、

関数を使用してオブジェクトをポストパラメータに変換するのが好きです。

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'}
})

これはついに$ httpParamSerializerJQLikeを使用してAngular 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'
})})

私が使用してjQueryのPARAMをしてAngularJSが投稿 requrest。ここに例があります... HTMLコードでmyapp定義されているAngularJSアプリケーションモジュールを作成ng-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
    });
}]);

私はコードを説明するのは好きではありません。理解するのに十分簡単です:)これparamはjQueryからのものであるため、jQueryとAngularJSの両方をインストールして機能させる必要があります。こちらがスクリーンショットです。

これがお役に立てば幸いです。ありがとう！

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：

それ以外の場合、表記1を使用すると、node.jsルーターはreq.bodyのデータを予期します。

req.body.msg

また、情報をJSONペイロードとして送信します。これは、jsonに配列があり、x-www-form-urlencodedがいくつかの問題を引き起こす場合に適しています。

動いた。それが役に立てば幸い。

JQueryとは異なり、知識を深めるために、Angularはクライアントからサーバーへの POSTデータ転送に JSON形式を使用します（JQueryはおそらくx-www-form-urlencodedを適用しますが、JQueryおよびAngularはデータ入力にJSONを使用します）。したがって、問題には2つの部分があります。jsクライアント部分とサーバー部分です。だからあなたは必要です：

1. js Angular client partを次のように置きます：

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

そして

2. サーバー部分に書き込み、クライアントからデータを受信します（phpの場合）。

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

注：$ _POSTは機能しません！

ソリューションは、うまくいけば、うまくいきます。

angularjsのPostメソッドを介してデータを送信$httpするには、変更する必要があります

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

@ felipe-miossoの答えを基にするには：

1. ここからAngularJSモジュールとしてダウンロードし、
2. インストールする

3. それをアプリケーションに追加します。

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

私にはコメントする評判はありませんが、ドンFの回答に対する返答/追加として：

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

連想配列を適切に返すtrueには、json_decode関数の2番目のパラメーターを追加する必要があります。

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

角度

  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();
        }

このコードは私のために問題を解決しました。これはアプリケーションレベルのソリューションです。

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";
  }
]);

これをjsファイルに追加してください：

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

これをサーバーファイルに追加します。

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

うまくいくはずです。

私も同様の問題に直面し、私はこのようなことをしていましたが、それはうまくいきませんでした。Springコントローラがデータパラメータを読み取ることができませんでした。

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"

これはおそらく遅い回答ですが、最も適切な方法は、「get」リクエストを実行するときに同じコードの角を使用することです。これを使用して$httpParamSerializerそれをコントローラに注入する必要があるため、次の操作を簡単に行うことができます。 Jqueryをまったく使用しない、 $http.post(url,$httpParamSerializer({param:val}))

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

私の場合、私はこのような問題を解決します：

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オブジェクトを含む各paramにJSON.stringifyを使用し、「$。param」を使用してデータオブジェクトを作成する必要があります:-)

注：私の「objJSON」は、配列、整数、文字列、htmlコンテンツを含むJSONオブジェクトです。彼の合計サイズは> 3500文字です。

私は答えを受け入れたことを知っています。しかし、もし答えが何らかの理由で彼らに合わないなら、以下は読者を助けるかもしれません。

AngularはjQueryと同じようにajaxを行いません。ガイドに従って角度を変更しようとしたところ$httpprovider、他の問題が発生しました。たとえば、$this->input->is_ajax_request()関数が常に失敗するcodeigniterを使用します（これは別のプログラマによって作成され、グローバルに使用されるため変更できません）。これは本当のajaxリクエストではないと言っています。

それを解決するために、私は延期された約束を利用しました。私はそれを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呼び出しをangularで使用することができ、を更新することができました$scope。

Expressでも同じ問題がありました。解決するには、httpリクエストを送信する前にbodyparserを使用してjsonオブジェクトを解析する必要があります。

app.use(bodyParser.json());

私はasp.net WCF Webサービスを使用しており、角度のあるJSと以下のコードが機能しています：

 $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;                    
       })

それが役に立てば幸い。

$ http.postメソッドを使用してサーバーにデータを送信する方法の完全なコードスニペット、およびこの場合に機能しなかった理由が見つかりませんでした。

以下のコードスニペットの説明...

1. jQuery $ .param関数を使用して、JSONデータをwww投稿データにシリアル化しています

2. AngularJS $ http.postのリクエストと共に渡されるconfig変数にContent-Typeを設定すると、wwwポスト形式でデータを送信することをサーバーに指示できます。

3. $ htttp.postメソッドに注目してください。ここでは、1番目のパラメーターをURL、2番目のパラメーターをデータ（シリアル化）、3番目のパラメーターをconfigとして送信しています。

残りのコードは自明です。

$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メソッドのコード例を見てください。

PHPを使用している場合、これはAngularJS POSTからPHPの配列にアクセスする簡単な方法です。

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

Angular> = 1.4を使用している場合、Angularが提供するシリアライザを使用した最もクリーンなソリューションは次のとおりです。

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、、データオブジェクトを手動でシリアル化したりし、JSONとしてシリアル化されるデフォルトであり、エンドポイントで誤って解釈される場合があります。

たとえば、上記の例で正しいシリアライザが設定されていなかった場合、エンドポイントでは次のように表示されます。

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

そして、それは予期しない解析につながる可能性があります。たとえば、ASP.NETはそれを値として、nullパラメーター名として扱い{"param1":"value1","param2":"value2"}ます。またはFiddlerは{"param1":"value1","param2":"value2"}、パラメーター名とnull値として、それを逆に解釈します。

OPの推奨される動作フォーマットとDenisonの回答に似ていますが、jQueryに依存している$http.postだけ$httpでなく、代わりに使用している点が異なります。

ここでjQueryを使用することの良い点は、複雑なオブジェクトが適切に渡されることです。データを文字化けする可能性があるURLパラメータに手動で変換することに対して。

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

この問題が発生したとき、投稿していたパラメータは、単純なオブジェクトではなくオブジェクトの配列であることがわかりました。

角度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) {
[...]

私はしばらくの間、受け入れられた回答のコード（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が空の配列であることを認識させることはできませんが、少なくともキーが表示されます。これは、特定の構造に依存するコードがある場合に、内部が本質的に空の場合でも重要です。

また、未定義のとnullを空の文字列に変換することにも注意してください。

送信するデータを2番目のパラメーターとして入力するだけです。

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

同様に機能する別の形式は次のとおりです。

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

paramName呼び出している関数のパラメーターの名前と完全に一致していることを確認してください。

ソース：AngularJSポストショートカットメソッド

私は以下のコードでこれを解決しました：

クライアント側（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);
        }
    }

これがお役に立てば幸いです。