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




angular-http (20)

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


मैं angular जेएस के साथ एएसपीनेट डब्ल्यूसीएफ webservices का उपयोग कर रहा हूँ और नीचे कोड काम किया:

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

आशा करता हूँ की ये काम करेगा।


@ फ़ेलिप-मालोसो के उत्तर पर निर्माण करने के लिए:

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

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

अंत में यह $ 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'
})})

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

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

इसे अपनी जेएस फ़ाइल में जोड़ें:

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

और इसे अपनी सर्वर फ़ाइल में जोड़ें:

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

यह काम करना चाहिए।


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

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

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

कोणीय

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

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

वेबएपीआई 2

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

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

            return Ok();
        }

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


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

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

एक और रूप जो काम करता है वह है:

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

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

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


मुझे AngularJS और Node.js + Express 4 + राउटर के साथ एक ही समस्या थी

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

नोटेशन 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 राउटर req.body में डेटा की अपेक्षा करेगा अगर नोटेशन 1:

req.body.msg

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

इसने काम कर दिया। आशा करता हूँ की ये काम करेगा।


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

app.use(bodyParser.json());

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

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

इसे हल करने के लिए, मैंने स्थगित वादे की मदद ली। मैंने फ़ायरफ़ॉक्स में इसका परीक्षण किया, और यानी 9 और यह काम किया।

मेरे पास निम्नलिखित कोणीय कोड के बाहर परिभाषित फ़ंक्शन है। यह फ़ंक्शन नियमित jquery AJAX कॉल करता है और स्थगित / वादा (मैं अभी भी सीख रहा हूं) वस्तु देता हूं।

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

फिर मैं निम्नलिखित कोड का उपयोग करके इसे कोणीय कोड कह रहा हूं। कृपया ध्यान दें कि हमें $scope का उपयोग करके मैन्युअल रूप से $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 अपडेट करने की अनुमति देता है।


मेरे पास एक समान समस्या है, और मुझे आश्चर्य है कि यह भी उपयोगी हो सकता है: https://.com/a/11443066

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

सादर,


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

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

एक एसोसिएटिव सरणी को सही तरीके से वापस करने के लिए json_decode फ़ंक्शन में true ज़रूरतों का दूसरा पैरामीटर जोड़ा जाना चाहिए:

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


मैं AngularJS पोस्ट requrest के साथ jQuery परम का उपयोग करें। यहां एक उदाहरण दिया गया है ... AngularJS एप्लिकेशन मॉड्यूल बनाएं, जहां myapp को आपके HTML कोड में ng-app साथ परिभाषित किया गया है।

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

अब हम एक लॉगिन नियंत्रक और पोस्ट ईमेल और पासवर्ड बनाते हैं।

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 दोनों इंस्टॉल करना होगा। यहां एक स्क्रीनशॉट है।

उम्मीद है कि यह सहायक है। धन्यवाद!


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

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

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

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

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

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

A: 1
:
D: 2

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

मैंने टाइपस्क्रिप्ट का उपयोग किया क्योंकि मुझे मजबूत टाइपिंग पसंद है लेकिन शुद्ध जेएस में कनवर्ट करना आसान होगा:

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 को यह पहचानने के लिए संभव नहीं है कि बा और सी खाली सरणी हैं, लेकिन कम से कम कुंजी दिखाई देती हैं, जो महत्वपूर्ण है जब एक निश्चित संरचना पर निर्भर करता है, तब भी जब यह अनिवार्य रूप से खाली होता है।

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


मैंने इसे नीचे दिए गए कोड से हल किया:

क्लाइंट साइड (जेएस):

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

ध्यान दें कि डेटा एक वस्तु है।

सर्वर पर (एएसपी.नेट एमवीसी):

[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.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 रूप में सही ढंग से क्रमबद्ध करेगा और इसे application/x-www-form-urlencoded; charset=utf-8 साथ /requesturl भेज देगा application/x-www-form-urlencoded; charset=utf-8 application/x-www-form-urlencoded; charset=utf-8 सामग्री-प्रकार शीर्षलेख के रूप में आमतौर पर एंडपॉइंट्स पर POST अनुरोधों के साथ अपेक्षा की जाती है।

टी एल; डॉ

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

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

उदाहरण के लिए यदि उपरोक्त उदाहरण में सही धारावाहिक सेट नहीं किया गया था, तो यह अंत बिंदु में देखा जाएगा:

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

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


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

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

एक कोणीय जेएस पोस्ट से PHP में एक सरणी का उपयोग करने के लिए।


यह शायद एक देर का जवाब है, लेकिन मुझे लगता है कि सबसे अच्छा तरीका कोड कोणीय उपयोग के उसी टुकड़े का उपयोग करना है जब आप " $httpParamSerializer " अनुरोध करते हुए "प्राप्त करें" अनुरोध करते समय $httpParamSerializer को इसे अपने नियंत्रक को इंजेक्ट करना होगा ताकि आप बिना निम्नलिखित के कर सकें Jquery का उपयोग करने के लिए, $http.post(url,$httpParamSerializer({param:val}))

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




angular-http