AngularJs $ http.post () डेटा नहीं भेजता है


337

क्या कोई मुझे बता सकता है कि निम्नलिखित कथन पोस्ट किए गए यूआरएल को पोस्ट डेटा क्यों नहीं भेजता है? 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 () के साथ इसे करने का एक तरीका है - और क्या मुझे हमेशा काम करने के लिए हेडर को शामिल करना होगा? मेरा मानना ​​है कि उपरोक्त सामग्री प्रकार भेजे गए डेटा का प्रारूप निर्दिष्ट कर रहा है, लेकिन क्या मैं इसे जावास्क्रिप्ट ऑब्जेक्ट के रूप में भेज सकता हूं?


क्या यूआरएल एक ही मूल में है?
fmquaglia

क्षमा करें - सभी उदाहरणों के लिए हाँ यह एक ही यूआरएल है
स्पेंसर मार्क

@SpencerMark माफ करना .. मैंने आपके वर्किंग कोड के ऊपर कोशिश की है .. मेरे लिए यह काम नहीं कर रहा है।
अरुल सिद्धन

जवाबों:


346

मुझे asp.net MVC का उपयोग करने में एक ही समस्या थी और यहां समाधान मिला

AngularJS के लिए नए लोगों में बहुत भ्रम है कि $httpसेवा शॉर्टहैंड फ़ंक्शन ( $http.post()आदि) क्यों jQuery समकक्ष ( jQuery.post(), आदि) के साथ swappable प्रतीत नहीं होते हैं

अंतर यह है कि 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 में bower install angular-post-fix --save-devजोड़ दिया है , इसे जोड़ने के लिए उपयोग करें।
बिली ब्लेज़

तो वहाँ एक तरीका है php डेटा संचारित करने का तरीका है। क्योंकि यही वह मुद्दा है जो मैं वर्तमान में कर रहा हूं।
डिमोड्वे

1
यह कोड अधिकांश भाग पर बहुत अच्छा काम करता है, लेकिन मैंने खाली वस्तुओं या समतल रिक्त मानों के पदानुक्रम जमा करते समय इसके साथ समस्याएँ की हैं। उदाहरण के लिए, {a: 1, b: {c: {d: {}}, e: अपरिभाषित, f: null, g: 2} को ठीक से एनकोड नहीं किया जाएगा, और PHP इसे ["a" = के रूप में प्राप्त करेगा। > "1", "जी" => "2"]। "बी", साथ ही साथ "ई" और "एफ" के तहत पूरी संरचना, जिसमें कुंजी स्वयं शामिल है - खो जाएगी। मैंने नीचे वैकल्पिक कोड पोस्ट किया है, जिसके साथ उपरोक्त संरचना डिकोड हो जाती है: ["a = =" 1 "," b "=> [" c "=> [" d "=>" "]]," e " => "", "एफ" => "", "जी" => "2"]।
ओबीई

1
मुझे मल्टीपार्ट / फॉर्म-डेटा के लिए इसे कैसे लागू करना चाहिए?
davidlee

शानदार :) वास्तव में एक आकर्षण की तरह काम किया। मुझे
SKaul

115

यह ऊपर स्पष्ट नहीं है, लेकिन यदि आप PHP में अनुरोध प्राप्त कर रहे हैं, तो आप इसका उपयोग कर सकते हैं:

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

PHP में एक AngularJS POST से एक सरणी तक पहुँचने के लिए।


3
जब यह इसके साथ $ _POST सरणी को अधिलेखित करने के लिए एक सरणी के लिए मजबूर करने के लिए मुझे सही जोड़ने की आवश्यकता थी। json_decode(file_get_contents('php://input'), true);
जॉन

4
@Zalaboza, मैं इस बात से सहमत हूँ कि किसी भी समाधान को 'सार्वभौमिक' माना जाना कठिन है, लेकिन मैं इस बात से सहमत नहीं हूँ कि यह 'hacky' है --- php.net बताता है: "file_get_contents () सामग्री को पढ़ने का पसंदीदा तरीका है फ़ाइल को एक स्ट्रिंग में। यह प्रदर्शन को बढ़ाने के लिए आपके ओएस द्वारा समर्थित होने पर मेमोरी मैपिंग तकनीकों का उपयोग करेगा। " दी गई है कि हम इस स्थिति में एक फ़ाइल नहीं पढ़ रहे हैं, लेकिन हम पोस्ट किए गए डेटा को पढ़ रहे हैं। यह बहुत अच्छा होगा यदि आप एक नए उत्तर में योगदान दे सकते हैं या पाठकों (स्वयं सहित) को इस बारे में बेहतर निर्णय लेने में मदद करने के लिए नई जानकारी प्रदान कर सकते हैं।
डॉन एफ

78

आप डिफ़ॉल्ट "सामग्री-प्रकार" को इस तरह सेट कर सकते हैं:

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

dataप्रारूप के बारे में :

$ Http.post और $ http.put तरीके किसी भी जावास्क्रिप्ट ऑब्जेक्ट (या एक स्ट्रिंग) मान को उनके डेटा पैरामीटर के रूप में स्वीकार करते हैं। यदि डेटा जावास्क्रिप्ट ऑब्जेक्ट है, तो वह डिफ़ॉल्ट रूप से, JSON स्ट्रिंग में परिवर्तित हो जाएगा।

इस भिन्नता का उपयोग करने का प्रयास करें

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

9
यह काम करने के लिए प्रतीत नहीं होता है। मैंने स्ट्रिंग के रूप में डेटा के साथ बदलाव की कोशिश की है और हेडर: {'सामग्री-प्रकार': 'एप्लिकेशन / x-www-form-urlencoded'} - और यह काम करने लगता है, लेकिन क्या करने का एक बेहतर तरीका है यह?
स्पेंसर मार्क

2
डिफ़ॉल्ट सामग्री प्रकार सेट करें जैसा कि ऊपर वर्णित है और डेटा के लिए js ऑब्जेक्ट का उपयोग नहीं करते हैं। इस तरह स्ट्रिंग का उपयोग करें: 'संदेश =' + संदेश मेरे लिए काम करता है
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'}
})

सादर,


ऐसा लगता है कि हेडर ही एकमात्र बदलाव था जिसकी हमें जरूरत थी। धन्यवाद!
बेन गुथरी

धन्यवाद, यह मेरे लिए किया :) समस्या POST डेटा की एन्कोडिंग थी।
दान

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 (ख़राब अनुरोध)
अनुज

19

मैं AngularJS पोस्ट requrest के साथ jQuery के परम का उपयोग करता हूं। यहाँ एक उदाहरण है ... AngularJS एप्लिकेशन मॉड्यूल बनाएं, जहां आपके HTML कोड में परिभाषित किया गया है।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 + Router के साथ भी यही समस्या थी

राउटर को शरीर में पोस्ट के अनुरोध से डेटा की उम्मीद है। अगर मैं कोणीय डॉक्स से उदाहरण के बाद यह शरीर हमेशा खाली था

संकेतन 1

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

लेकिन अगर मैं इसे डेटा में इस्तेमाल किया

अंकन २

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

1 संपादित करें:

अन्यथा नोड .js राउटर req.body में डेटा की अपेक्षा करेगा यदि नोटेशन 1 का उपयोग किया जाए:

req.body.msg

जो JSON पेलोड के रूप में सूचना भी भेजता है। यह कुछ मामलों में बेहतर है जहां आपके पास आपके जेसन में एरेज़ हैं और x-www-form-urlencoded कुछ समस्याएं देगा।

इसने काम कर दिया। आशा है ये मदद करेगा।


10

JQuery के विपरीत और पैदल सेना के लिए, कोणीय क्लाइंट से सर्वर पर JST डेटा स्थानांतरण के लिए JSON प्रारूप का उपयोग करता है (JQuery लागू होता है x-www-form-urlencoded संभवतः, हालांकि JQuery और कोणीय डेटा के लिए JSON का उपयोग करता है)। इसलिए समस्या के दो भाग हैं: js क्लाइंट भाग में और आपके सर्वर भाग में। तो आप की जरूरत है:

  1. इस तरह से js कोणीय ग्राहक भाग डालें:

    $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 काम नहीं करेगा!

समाधान मेरे लिए ठीक है, उम्मीद है, और आप के लिए काम करता है।



7

@ Felipe-miosso के उत्तर पर निर्माण करने के लिए:

  1. इसे यहां से AngularJS मॉड्यूल के रूप में डाउनलोड करें ,
  2. इसे स्थापित करो
  3. इसे अपने आवेदन में जोड़ें:

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

6

मेरे पास टिप्पणी करने के लिए प्रतिष्ठा नहीं है, लेकिन डॉन एफ के जवाब के जवाब में / इसके अलावा:

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

वेबएपीआई २

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

लेकिन इस मंच और एपीआई डॉक्टर को पढ़ते हुए, मैंने निम्नलिखित तरीके की कोशिश की और मेरे लिए काम किया। यदि कुछ में भी ऐसी ही समस्या है, तो आप नीचे दिए गए तरीके से भी कोशिश कर सकते हैं।

$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 # पोस्ट देखें। {data: '"id": "1"'} - स्ट्रिंग या ऑब्जेक्ट का मैप जो URL में बदल जाएगा? डेटा = "id: 1"


4

यह शायद एक देर से जवाब है, लेकिन मुझे लगता है कि सबसे उचित तरीका कोड कोणीय उपयोग के एक ही टुकड़े का उपयोग करना है जब "प्राप्त" करने का अनुरोध करते हुए आपको $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 ऑब्जेक्ट के साथ प्रत्येक Param के लिए JSON.stringify का उपयोग करने की आवश्यकता है, और फिर "$ .par" :-) के साथ अपनी डेटा ऑब्जेक्ट बनाएँ।

NB: मेरा "objJSON" एक JSON ऑब्जेक्ट है जिसमें सरणी, पूर्णांक, स्ट्रिंग और HTML सामग्री है। उसका कुल आकार> 3500 वर्ण है।


3

मुझे पता है उत्तर स्वीकार कर लिया है। लेकिन, निम्नलिखित पाठकों को भविष्य में मदद मिल सकती है, यदि उत्तर किसी भी कारण से उनके लिए उपयुक्त नहीं है।

कोणीय jQuery के समान ajax नहीं करता है। जबकि मैंने कोणीय को संशोधित करने के लिए गाइड का पालन करने की कोशिश की $httpprovider, मुझे अन्य समस्याओं का सामना करना पड़ा। उदाहरण के लिए, मैं कोडिनिटर का उपयोग करता हूं जिसमें $this->input->is_ajax_request()फ़ंक्शन हमेशा विफल रहता है (जो किसी अन्य प्रोग्रामर द्वारा लिखा गया था और वैश्विक रूप से उपयोग किया जाता है, इसलिए कठबोली परिवर्तन) यह कहना वास्तविक अजाक्स अनुरोध नहीं था।

इसे हल करने के लिए, मैंने स्थगित वादे की मदद ली । मैंने इसे फ़ायरफ़ॉक्स, और 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
कोणीय की अपनी वादे वाली सेवा है, जिसे 1.3 के बाद से $ क्यू कहा जाता है। पोस्ट के लिए JQuery का उपयोग करने की आवश्यकता नहीं है।
mbokil

3

मुझे एक्सप्रेस में भी यही समस्या थी .. जिसे सुलझाने के लिए आपको http अनुरोध भेजने से पहले json ऑब्जेक्ट्स को पार्स करने के लिए bodyparser का उपयोग करना होगा।

app.use(bodyParser.json());

3

मैं asp.net WCF webservices का उपयोग कोणीय 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;                    
       })

आशा है ये मदद करेगा।


3

सर्वर पर डेटा भेजने के लिए $ http.post विधि का उपयोग करने का एक पूरा कोड स्निपेट नहीं मिला और इस मामले में यह काम क्यों नहीं कर रहा था।

नीचे दिए गए कोड स्निपेट की व्याख्या ...

  1. मैं JSON डेटा को www पोस्ट डेटा में अनुक्रमित करने के लिए jQuery $ .param फ़ंक्शन का उपयोग कर रहा हूं
  2. कॉन्फिगर चर में कंटेंट-टाइप सेट करना जो कि angularJS $ http.post के अनुरोध के साथ पारित किया जाएगा जो सर्वर को निर्देश देता है कि हम www पोस्ट फॉर्मेट में डेटा भेज रहे हैं।

  3. $ Nottp.post विधि को नोटिस करें, जहां मैं 1 पैरामीटर को url, 2 पैरामीटर को डेटा (क्रमबद्ध) और 3 पैरामीटर को कॉन्फिगर के रूप में भेज रहा हूं।

शेष कोड स्वयं समझ में आता है।

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

और यह डेटा को सही ढंग से क्रमबद्ध करेगा param1=value1&param2=value2और सामग्री-प्रकार हेडर के /requesturlसाथ भेज देगा application/x-www-form-urlencoded; charset=utf-8क्योंकि यह आम तौर पर समाप्ति बिंदुओं पर POST अनुरोधों के साथ अपेक्षित है।

टी एल; डॉ

अपने शोध के दौरान मैंने पाया कि इस समस्या का उत्तर कई अलग-अलग स्वादों में आता है; कुछ बहुत जटिल हैं और कस्टम कार्यों पर निर्भर हैं, कुछ jQuery पर निर्भर करते हैं और कुछ यह सुझाव देने में अपूर्ण हैं कि आपको केवल हेडर सेट करने की आवश्यकता है।

यदि आप केवल Content-Typeहेडर सेट करते हैं , तो अंतिम बिंदु POST डेटा को देखेगा, लेकिन यह मानक प्रारूप में नहीं होगा क्योंकि जब तक आप अपना स्ट्रिंग प्रदान नहीं करते हैं data, या मैन्युअल रूप से अपनी डेटा ऑब्जेक्ट को क्रमबद्ध करते हैं, तब तक यह सभी JSON के रूप में क्रमबद्ध हो जाएगा। डिफ़ॉल्ट और समापन बिंदु पर गलत तरीके से व्याख्या की जा सकती है।

उदाहरण के लिए, यदि सही धारावाहिक को उपरोक्त उदाहरण में सेट नहीं किया गया है, तो इसे एंडपॉइंट में देखा जाएगा:

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

और इससे अप्रत्याशित पार्सिंग हो सकती है, जैसे ASP.NET इसे मान के nullसाथ एक पैरामीटर नाम के रूप में मानता है {"param1":"value1","param2":"value2"}; या फ़िडलर {"param1":"value1","param2":"value2"}पैरामीटर नाम और nullमूल्य के रूप में , इसे दूसरे तरीके से व्याख्या करता है ।


3

ओपी के सुझाए गए कार्य प्रारूप और डेनिसन के उत्तर के समान, केवल के $http.postबजाय उपयोग करने के अलावा $httpऔर अभी भी jQuery पर निर्भर है।

यहाँ jQuery का उपयोग करने के बारे में अच्छी बात यह है कि जटिल वस्तुएं ठीक से पास हो जाती हैं; मैन्युअल रूप से URL पैरामीटर में कनवर्ट करने के विरुद्ध जो डेटा को गार्ब कर सकते हैं।

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

2

जब मुझे यह समस्या थी तो मैं जो पैरामीटर पोस्ट कर रहा था वह एक साधारण वस्तु के बजाय वस्तुओं की एक सरणी के रूप में निकला।


2

कोणीय 1.2 से 1.3 तक अपडेट किए गए, कोड में एक समस्या पाई गई है। एक संसाधन को बदलने से एक अंतहीन लूप हो जाएगा क्योंकि (मुझे लगता है) $ वादा फिर से उसी वस्तु को पकड़े हुए है। शायद यह किसी की मदद करेगा ...

मैं इसे ठीक कर सकता हूं:

[...]
  /**
 * 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

मैं थोड़ी देर के लिए स्वीकृत उत्तर का कोड (फेलिप का कोड) का उपयोग कर रहा हूं और यह बढ़िया काम कर रहा है (धन्यवाद, फेलिप)।

हालांकि, हाल ही में मुझे पता चला कि इसमें खाली वस्तुओं या सरणियों के साथ समस्याएं हैं। उदाहरण के लिए, इस ऑब्जेक्ट को सबमिट करते समय:

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

PHP B और C को बिल्कुल नहीं देखती है। यह यह हो जाता है:

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

Chrome में वास्तविक अनुरोध पर एक नज़र यह दिखाता है:

A: 1
:
D: 2

मैंने एक वैकल्पिक कोड स्निपेट लिखा। यह मेरे उपयोग-मामलों के साथ अच्छी तरह से काम करता है, लेकिन मैंने इसे बड़े पैमाने पर परीक्षण नहीं किया है इसलिए सावधानी के साथ उपयोग करें।

मैंने टाइपस्क्रिप्ट का उपयोग किया क्योंकि मुझे मजबूत टाइपिंग पसंद है लेकिन शुद्ध 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("&");
    } ];
} ]);

यह फेलिप के कोड से कम कुशल है, लेकिन मुझे नहीं लगता कि यह बहुत मायने रखता है क्योंकि इसे HTTP अनुरोध के समग्र ओवरहेड की तुलना में तत्काल होना चाहिए।

अब PHP दिखाता है:

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

जहाँ तक मुझे पता है कि PHP को यह पहचानना संभव नहीं है कि बा और सी खाली सरणियाँ हैं, लेकिन कम से कम कुंजियाँ दिखाई देती हैं, जो महत्वपूर्ण है जब कोड होता है जो एक निश्चित संरचना पर निर्भर करता है, तब भी जब यह अनिवार्य रूप से खाली होता है।

यह भी ध्यान दें कि यह अपरिभाषित एस और नल एस को खाली तारों में परिवर्तित करता है ।


जावास्क्रिप्ट के साथ POO में कोड करने का सबसे अच्छा तरीका टाइपस्क्रिप्ट!
सौंदर्य नष्ट

2

दूसरे पैरामीटर के रूप में आप जो डेटा भेजना चाहते हैं, उसे डालें:

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

एक अन्य रूप जो भी काम करता है वह है:

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

सुनिश्चित करें कि paramNameआप जिस फ़ंक्शन को कॉल कर रहे हैं उसके पैरामीटर के नाम से बिल्कुल मेल खाता है।

स्रोत: AngularJS पोस्ट शॉर्टकट विधि


5
क्या कोई समझा सकता है कि इस जवाब को वोट क्यों दिया गया?
मार्को लैकोविक

1
ऐसा कोई तरीका नहीं है कि इस समाधान को वोट दिया गया है, यह सबसे सरल, सबसे छोटा है और कोणीय दस्तावेज़ीकरण docs.angularjs.org/api/ng/service/$http
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);
        }
    }

आशा है कि यह उपयोगी था।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.