web-dev-qa-db-ja.com

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オブジェクトとして送信できますか?

331
Spencer Mark

私はasp.net MVCを使用して同じ問題を抱えていた/ ここで解決策を見つけた

AngularJS を使用する初心者の間では、$httpサービスの短縮形関数($http.post()など)が jQuery の同等物(jQuery.post()など)と交換できないように思われる理由について多くの混乱があります。 )

違いは、 jQuery および Angular JS のデータのシリアル化および送信方法です。根本的に、問題は選択したサーバー言語が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;
  }];
});
340
Felipe Miosso

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

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

AngularJS POSTからPHP内の配列にアクセスするには。

112
Don F

このようにデフォルトの "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
    });
}
77
Denison Luz

私は同様の問題を抱えています、そしてこれが同様に役に立つことができるかどうか疑問に思います: 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'}
})

よろしく、

56
ericson.cepeda

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

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'}
})
32
Rômulo Collopy

これは、 $ 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":"[email protected]",
      "password":"123456"
    }
  }),
  headers:
    'Content-Type': 'application/x-www-form-urlencoded'
})})
29
Stetzon

jQueryパラメータ with AngularJS post requrestを使用します。以下はその例です。AngularJSアプリケーションモジュールを作成します。ここで、myappは、HTMLコードの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の両方をインストールする必要があります。これがスクリーンショットです。

enter image description here

これが役に立つことを願っています。ありがとうございます。

16
Madan Sapkota

JQueryとは異なり、また小児用として、AngularはPOST data transfer にクライアントからサーバーへのJSON形式を使用します(JQueryはx-www-form-を適用します)。 JQueryとAngularはデータの入力にJSONを使用していますが、おそらくurlencodeされています。したがって、問題が2つあります。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は機能しません。

解決策は私のために、うまくいけば、そしてあなたのためにうまくいきます。

9
Roman

AngularJSとNode.js + Express 4 + Routerで同じ問題がありました

ルーターは、投稿のリクエストからのデータを本文に入れます。 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が問題を起こす場合にはより良い方法です。

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

9
alknows

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

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

@ felipe-miossoの答えに基づいて

  1. AngularJSモジュールとして ここからダウンロードしてください
  2. それをインストール
  3. アプリケーションに追加してください。

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

私はコメントする評判を持っていませんが、それに応えて/ Don Fの答えに加えて:

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

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

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

6
Esten

Angular

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

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

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
Spartak Lalaj

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

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

そしてこれをあなたのサーバーファイルに追加してください:

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

それはうまくいくはずです。

5

これはおそらく遅い答えですが、最も適切な方法は、あなたを使用して「get」リクエストを行うときにangularと同じコードを使用することだと思います$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"を使用してデータオブジェクトを構築する必要があります。

注意:私の "objJSON"は配列、整数、文字列そしてhtmlの内容を含むJSONオブジェクトです。彼の合計サイズは> 3500文字です。

4
bArraxas

私も同じような問題に直面しました、そして、私はこのようなことをしていました、そして、それはうまくいきませんでした。私の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'}
            });

https://docs.angularjs.org/api/ng/service/ $ http#postを参照して、param configの機能を確認してください。 {data: '"id": "1"'} - URLに変換される文字列またはオブジェクトのマップ?data = "id:1"

4
Viraj

私は知っている承認済み答え。しかし、答えが何らかの理由で彼らに合わない場合、以下を読むことは将来の読者に役立つかもしれません。

AngularはjQueryと同じajaxを行いません。ガイドに従って角度の$httpproviderを変更しようとしましたが、他の問題が発生しました。例えば。私は$this->input->is_ajax_request()関数がいつも失敗するcodeigniterを使います(これは他のプログラマによって書かれグローバルに使われていたので、かなりの変更が必要です)。

それを解決するために、 延期の約束 の助けを借りました。私はFirefoxでそれをテストし、そしてie9そしてそれはうまくいった。

以下の関数が定義されていますoutside任意の角度コード。この関数は、通常のjquery ajax呼び出しを行い、(まだ学習中の)遅延/約束オブジェクトを返します。

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

それから私はそれを次のコードを使って角度コードと呼んでいます。 $scope.$apply()を使用して手動で$scopeを更新する必要があることに注意してください。

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

これは完璧な答えではないかもしれませんが、それは私がAngularでjquery ajax呼び出しを使用することを可能にし、$scopeを更新することを可能にしました。

3
Nis

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

そして、それはデータをparam1=value1&param2=value2として正しくシリアル化し、/requesturl Content-Typeヘッダーを付けてapplication/x-www-form-urlencoded; charset=utf-8に送信します。これは通常、エンドポイントでのPOST要求で予想されるとおりです。

TL; DR

私の研究の間に、私はこの問題への答えが多くの異なったフレーバーにあることを発見しました。非常に複雑でカスタム関数に依存しているもの、jQueryに依存しているもの、およびヘッダーを設定するだけでよいことを示唆しているものが不完全です。

Content-Typeヘッダーを設定しただけでは、エンドポイントにはPOSTデータが表示されますが、dataとして文字列を指定しない限り、またはデータオブジェクトを手動でシリアル化しない限り、標準形式にはなりません。デフォルトではすべてJSONとしてシリアル化され、エンドポイントで誤って解釈される可能性があります。

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

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

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

3
Saeb Amini

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

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

私は角度jsとasp.net WCF Webサービスを使用していて、以下のコードはうまくいきました:

 $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
Mehdi Rostami

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

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

  1. JSONデータをwwwポストデータにシリアル化するためにjQuery $ .param関数を使用しています
  2. Www-postフォーマットでデータを送信していることをサーバーに指示するangularJS $ http.postのリクエストとともに渡されるconfig変数にContent-Typeを設定します。

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

3
Sheo Narayan

OPが提案している作業フォーマットとDenisonの答えに似ていますが、$http.postの代わりに$httpを使用しており、それでもjQueryに依存しています。

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

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

私は明白に同じ問題を抱えていました..あなたが解決するためにあなたはhttpリクエストを送る前にjsonオブジェクトを解析するためにbodyparserを使わなければなりません..

app.use(bodyParser.json());
3
msoliman

角度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
tom_w

私はしばらくの間、受け入れられた答えのコード(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"
]

私の知る限りでは、BaとCが空の配列であることをPHPに認識させることはできませんが、少なくともキーが表示されます。これは、特定の構造に依存するコードがある場合でも重要です。内部は基本的に空です。

また、 undefined sと null sを空の文字列に変換します。

2
obe

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

2
D. Kermott

それは角度のせ​​いではありません。 AngularはJSONの世界で機能するように設計されています。そのため、$ http serviceがAJAX requestを送信すると、すべてのデータをフォームデータとしてではなくペイロードとして送信するので、バックエンドアプリケーションはそれを処理できます。しかしjQueryは内部的にいくつかのことを行います。 jQueryの$ ajaxモジュールにフォームデータをJSONとしてバインドするように指示しますが、AJAXリクエストを送信する前に、JSONをシリアル化してapplication/x-www-form-urlencodedヘッダーを追加します。これにより、バックエンドアプリケーションはJSONではなくpostパラメータの形式でフォームデータを受け取ることができます。

しかし、次のようにしてAngular $ httpサービスのデフォルトの振る舞いを変更できます。

  1. ヘッダを追加する
  2. JSONの直列化

$ httpParamSerializerJQLikeは、jQueryの$ .paramと同じ方法でjsonをシリアライズするAngularの組み込みサービスです。

$http({
    method: 'POST',
    url: 'request-url',
    data: $httpParamSerializerJQLike(json-form-data),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8;'
    }
});

最初にフォームデータをJSONにシリアル化するためのプラグインが必要な場合は、これを使用してください https://github.com/marioizquierdo/jquery.serializeJSON

1
Uday Hiwarale

2番目のパラメータとして送信したいデータを入力してください。

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

また動作する別の形式は次のとおりです。

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

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

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

1
Marco Lackovic

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

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

これが役に立つことを願っています。

1
pixparker

私は小さな PHPヘルパー関数を書いた それは両方のタイプの入力パラメータを許す:

function getArgs () {
    if ($input = file_get_contents('php://input') && $input_params = json_decode($input,true))
        return $input_params + $_POST + $_GET;
    return $_POST + $_GET;
}

使用法 :

<?php
    include("util.php"); # above code
    $request = getArgs();

    $myVar = "";
    if (isset($request['myVar']))
        $myVar = $request['myVar'];
?>

したがって、JavaScriptを変更する必要はありません。

0
Craig Smedley

私はこの問題を抱えていた、問題は私が上記のヘッダを使用して投稿中にデータを取得することができませんでしたすなわち.

headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded'
}

Jquery Ajaxを使用している間、バックエンドサーバーで response.body にデータを取得していましたが、Angular ajaxを実装している間はデータがresponse.bodyから送られてきませんでした。

request.getParameterMap.keySet().iterator().next()
0
John Swain

上の簡単な解決策を見つけた

http://jasonwatmore.com/post/2014/04/18/post-a-simple-string-value-from-angularjs-to-net-web-api

return $http.post(Config.apiUrl + '/example/processfile', '"' + fileName + '"');
0
NoloMokgosi

@ FelipeMiosso's answer の近代化バージョンを提案するだけです - /:

.config(["$httpProvider", function ($httpProvider) {

  function buildKey(parentKey, subKey) {
    return parentKey + "[" + subKey + "]";
  }

  function buildObject(key, value) {
    var object = {};
    object[key] = value;
    return object;
  }

  function join(array) {
    return array.filter(function (entry) {
      return entry;
    }).join("&");
  }

  function arrayToQueryString(parentKey, array) {
    return join(array.map(function (value, subKey) {
      return toQueryString(buildObject(buildKey(parentKey, subKey), value));
    }));
  }

  function objectToQueryString(parentKey, object) {
    return join(Object.keys(object).map(function (subKey) {
      return toQueryString(buildObject(buildKey(parentKey, subKey), object[subKey]));
    }));
  }

  function toQueryString(input) {
    return join(Object.keys(input).map(function (key) {
      var value = input[key];
      if (value instanceof Array) {
        return arrayToQueryString(key, value);
      } else if (value instanceof Object) {
        return objectToQueryString(key, value);
      } else if (undefined !== value && null !== value) {
        return encodeURIComponent(key) + "=" + encodeURIComponent(value);
      } else {
        return "";
      }
    }));
  }

  function isQueryStringEligible(input) {
    return null !== input && "object" === typeof input && "[object File]" !== String(input);
  }

  var interceptor = [function () {
    return {
      request: function (config) {
        if (0 <= ["post", "put", "patch"].indexOf(config.method.toLowerCase()) && isQueryStringEligible(config.data)) {
          config.headers["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";
          config.data = toQueryString(config.data);
        }
        return config;
      }
    };
  }];

  $httpProvider.interceptors.Push(interceptor);

}])

ES6のバージョン:

.config(["$httpProvider", function ($httpProvider) {

  "use strict";

  const buildKey = (parentKey, subKey) => `${parentKey}[${subKey}]`;

  const buildObject = (key, value) => ({ [key]: value });

  const join = (array) => array.filter((entry) => entry).join("&");

  const arrayToQueryString = (parentKey, array) =>
    join(array.map((value, subKey) =>
      toQueryString(buildObject(buildKey(parentKey, subKey), value))));

  const objectToQueryString = (parentKey, object) =>
    join(Object.keys(object).map((subKey) =>
      toQueryString(buildObject(buildKey(parentKey, subKey), object[subKey]))));

  const toQueryString = (input) => join(Object.keys(input).map((key) => {
    const value = input[key];
    if (value instanceof Array) {
      return arrayToQueryString(key, value);
    } else if (value instanceof Object) {
      return objectToQueryString(key, value);
    } else if (undefined !== value && null !== value) {
      return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
    } else {
      return "";
    }
  }));

  const isQueryStringEligible = (input) =>
    null !== input && "object" === typeof input && "[object File]" !== String(input);

  const interceptor = [() => ({
    request(config) {
      if (0 <= ["post", "put", "patch"].indexOf(config.method.toLowerCase()) && isQueryStringEligible(config.data)) {
        config.headers["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";
        config.data = toQueryString(config.data);
      }
      return config;
    }
  })];

  $httpProvider.interceptors.Push(interceptor);

}])
0
sp00m

このようにしてください。そんなに書く必要はない

 isAuth = $http.post("Yr URL", {username: username, password: password});

そしてnodejsバックエンドで

app.post("Yr URL",function(req,resp)
{

  var username = req.body.username||req.param('username');
  var password = req.body.password||req.param('password');
}

これが役立つことを願っています

0
Siddharth

非常に単純な方法を使用することによって、これに従うことができます:

 $http({
        url : "submit_form_adv.php",
        method : 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        transformRequest: function(obj) {
            var str = [];
            for(var p in obj)
                str.Push(encodeURIComponent(p)+' = '+encodeURIComponent(obj[p]));

            return str.join('&');
        },
        data : {sample_id : 100, sample_name: 'Abin John'},

    }).success(function(data, status, headers, config) {

    }).error(function(ata, status, headers, config) {

    });
0
Hari