मैं jQuery के बिना $ http के साथ डेटा कैसे पोस्ट करता हूं?

Question

मैं AngularJS के लिए नया हूं, और एक शुरुआत के लिए, मैंने केवल AngularJS का उपयोग करके एक नया एप्लिकेशन विकसित करने के बारे में सोचा।

मैं $httpअपने Angular App से उपयोग करके सर्वर की तरफ AJAX कॉल करने का प्रयास कर रहा हूं ।

पैरामीटर भेजने के लिए, मैंने निम्नलिखित कोशिश की:

$http({
    method: "post",
    url: URL,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: $.param({username: $scope.userName, password: $scope.password})
}).success(function(result){
    console.log(result);
});

यह काम कर रहा है, लेकिन यह jQuery के साथ-साथ उपयोग कर रहा है $.param। JQuery पर निर्भरता को हटाने के लिए, मैंने कोशिश की:

data: {username: $scope.userName, password: $scope.password}

लेकिन यह विफल लग रहा था। फिर मैंने कोशिश की params:

params: {username: $scope.userName, password: $scope.password}

लेकिन यह भी विफल लग रहा था। फिर मैंने कोशिश की JSON.stringify:

data: JSON.stringify({username: $scope.userName, password: $scope.password})

मुझे अपनी खोज के लिए ये संभावित उत्तर मिले, लेकिन असफल रहा। क्या मुझसे कुछ गलत हो रही है? मुझे यकीन है, AngularJS यह कार्यक्षमता प्रदान करेगा, लेकिन कैसे?

Comments

मुझे नहीं पता कि वास्तविक समस्या क्या है लेकिन क्या आपने यह कोशिश की है$http({method: 'post', url: URL, data: {username: $scope.userName, password: $scope.password}});

— मृत्युंजय

आपका पहला तरीका काम करना चाहिए, $scope.userNameपरिभाषित किया गया है? आपने प्रयास क्यों नहीं किया data: data?

— केविन बी

@ केविनबी: क्षमा करें .. मैंने सही संपादन किया है।

— वीर श्रीवास्तव

@ मृत्युंजय: क्षमा करें .. मैंने संपादन किया है .. मैं भी यही कोशिश कर रहा था।

— वीर श्रीवास्तव

@ वीर ने काम किया या अभी भी आपके पास मुद्दे हैं?

— V31

Answer 1

मुझे लगता है कि आपको अपना डेटा ऑब्जेक्ट से JSON स्ट्रिंग में नहीं, बल्कि params को url में बदलना है।

बेन नडेल के ब्लॉग से ।

डिफ़ॉल्ट रूप से, $ http सेवा डेटा को JSON के रूप में क्रमबद्ध करके आउटगोइंग अनुरोध को रूपांतरित कर देगी और फिर इसे सामग्री- प्रकार, "एप्लिकेशन / json" के साथ पोस्ट कर देगी। जब हम एक FORM पोस्ट के रूप में मूल्य पोस्ट करना चाहते हैं, तो हमें क्रमांकन एल्गोरिथ्म को बदलने और सामग्री-प्रकार, "एप्लिकेशन / x-www-form-urlencoded" के साथ डेटा पोस्ट करने की आवश्यकता है।

उदाहरण यहाँ से ।

$http({
    method: 'POST',
    url: url,
    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: {username: $scope.userName, password: $scope.password}
}).then(function () {});

अपडेट करें

AngularJS V1.4 के साथ जोड़ी गई नई सेवाओं का उपयोग करने के लिए, देखें

• केवल AngularJS सेवाओं का उपयोग करके URL-एन्कोडिंग चर

Comments

JQuery का उपयोग नहीं करने के लिए धन्यवाद!

— OverMars

क्या होगा यदि मुझे मल्टीपार्ट / फॉर्म-डेटा जमा करना है?

— देजेल

जब तक कोणीय एम्बेड jqLite नीचे के रूप में angular.element, आप कर सकते हैं बसreturn angular.element.param(obj);

— Vicary

@Vicary इस बात का ध्यान रखें कि परम () jqLite में लागू नहीं है - code.angularjs.org/1.3.14/docs/api/ng/function/angular.element

— एलेक्स पावलोव

यह जाने का एक और तरीका है var obj = {a: 1, b: 2}; Object.keys(obj).reduce(function(p, c) { return p.concat([encodeURIComponent(c) + "=" + encodeURIComponent(obj[c])]); }, []).join('&');

— Test30

Answer 2

केवल AngularJS सेवाओं का उपयोग करके URL-एन्कोडिंग चर

AngularJS 1.4 और ऊपर के साथ, दो सेवाएं POST अनुरोधों के लिए url- एन्कोडिंग डेटा की प्रक्रिया को संभाल सकती हैं, जिससे transformRequestjQuery जैसी बाहरी निर्भरता के साथ डेटा का उपयोग करने की आवश्यकता को समाप्त किया जा सकता है :

1. $httpParamSerializerJQLike- jQuery के .param()( अनुशंसित ) से प्रेरित एक धारावाहिक

2. $httpParamSerializer - जीईटी अनुरोधों के लिए एंगुलर द्वारा उपयोग किया जाने वाला एक धारावाहिक

उदाहरण उपयोग

$http({
  url: 'some/api/endpoint',
  method: 'POST',
  data: $httpParamSerializerJQLike($scope.appForm.data), // Make sure to inject the service you choose to the controller
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded' // Note the appropriate header
  }
}).then(function(response) { /* do something here */ });

अधिक वर्बोज़ प्लंकर डेमो देखें

---

कैसे $httpParamSerializerJQLikeऔर $httpParamSerializerअलग हैं

सामान्य तौर पर, यह जटिल डेटा संरचनाओं की $httpParamSerializerतुलना में कम "पारंपरिक" यूआरएल-एन्कोडिंग प्रारूप का उपयोग करता है $httpParamSerializerJQLike।

उदाहरण के लिए (कोष्ठक के प्रतिशत एन्कोडिंग की अनदेखी):

• एक सरणी एन्कोडिंग

{sites:['google', 'Facebook']} // Object with array property

sites[]=google&sites[]=facebook // Result with $httpParamSerializerJQLike

sites=google&sites=facebook // Result with $httpParamSerializer

• किसी वस्तु को कूटना

{address: {city: 'LA', country: 'USA'}} // Object with object property

address[city]=LA&address[country]=USA // Result with $httpParamSerializerJQLike

address={"city": "LA", country: "USA"} // Result with $httpParamSerializer

Comments

हम किसी कारखाने के अंदर $ संसाधन पर इसका उपयोग कैसे कर सकते हैं?

— स्टिल लाइफ

$http.({...$http.post({...

— कार्लोस ग्रानडोस

@CarlosGranados ध्यान देने योग्य है। इस टाइपो को यहाँ और प्लंकेर डेमो में ठीक किया।

— बोअज

यह jQuery से AngularJS

— zero298

यह AngularJS- विशिष्ट उत्तर है जिसकी मुझे तलाश थी। मैं चाहता हूं कि पोस्टर इसे सर्वश्रेष्ठ उत्तर के रूप में चुने।

— मार्टी चांग

Answer 3

ये सभी ओवरकिल की तरह दिखते हैं (या काम नहीं करते) ... बस यह करें:

$http.post(loginUrl, `username=${ encodeURIComponent(username) }` +
                     `&password=${ encodeURIComponent(password) }` +
                     '&grant_type=password'
).success(function (data) {

Comments

अंत में कुछ सामान्य ज्ञान

— jlewkovich

क्या यह गलत सामग्री-प्रकार हेडर के साथ अनुरोध नहीं भेजेगा?

— फिल

इसने मेरे लिए काम किया ... यकीन नहीं है कि हेडर क्या था, लेकिन अनुरोध ने काम किया और इसे सफलतापूर्वक प्रमाणित करने की अनुमति दी। आप इसका परीक्षण क्यों नहीं करते हैं और हमें बताएं।

— सर्ज सगुन

@ मुझे लगता है कि यह सर्वर पर निर्भर हो सकता है, मुझे खराब अनुरोध मिला, जब तक कि मैंने {हेडर: {'सामग्री-प्रकार': 'एप्लीकेशन / x-www-form-urlencoded'}} को कॉन्फ़िगर नहीं किया, जब तक कि कॉन्फ़िगरेशन arg, या आपूर्ति का उपयोग नहीं हो जाता $ http (कॉन्फिगरेशन) कंस्ट्रक्टर, जैसे मोइसेस का उत्तर दिखाता है। किसी भी तरह से यह स्वीकृत उत्तर से बेहतर है क्योंकि यह कुछ जादुई परिवर्तन को पेश नहीं करता है और कुछ सहायक सेवा के उपयोगकर्ता की आवश्यकता नहीं है। धन्यवाद!

— श्री जंगल १ungle

Answer 4

समस्या JSON स्ट्रिंग प्रारूप है, आप डेटा में एक साधारण URL स्ट्रिंग का उपयोग कर सकते हैं:

$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: 'username='+$scope.userName+'&password='+$scope.password
}).success(function () {});

Comments

encodeURIComponent($scope.userName)यूआरएल का उपयोग आपको डेटा को एनकोड करने के लिए करना होगा या यदि उपयोगकर्ता मान दर्ज करते हैं तो आपके पैरामीटर भ्रष्ट हो जाएंगे"&myCustomParam=1"

— इवान हुस्नजक

यह एकमात्र उत्तर है जिसने मेरे लिए काम किया है! मैंने सफलता को छोड़ दिया है, लेकिन $ http प्रारूप अच्छा है

— xenteros

Answer 5

इस तरह से यह होना चाहिए (और कृपया कोई बैकएंड परिवर्तन न करें ... निश्चित रूप से नहीं ... यदि आपका सामने वाला स्टैक समर्थन नहीं करता है application/x-www-form-urlencoded, तो इसे फेंक दें ... उम्मीद है कि AngularJS करता है!

$http({
     method: 'POST',
     url: 'api_endpoint',
     headers: {'Content-Type': 'application/x-www-form-urlencoded'},
     data: 'username='+$scope.username+'&password='+$scope.password
 }).then(function(response) {
    // on success
 }, function(response) {
    // on error
 });

AngularJS 1.5 के साथ एक आकर्षण की तरह काम करता है

लोग, कुछ सलाह दें:

• वादों का उपयोग करें , के .then(success, error)साथ और कॉलबैक के $httpबारे में भूल जाते हैं (जैसा कि उन्हें पदावनत किया जा रहा है).sucess.error

• यहाँ पर कोणीयरज साइट से " जहाँ आप कॉलबैक पैरामीटर मान जाना चाहिए निर्दिष्ट करने के लिए प्लेसहोल्डर के रूप में JSON_CALLBACK स्ट्रिंग का उपयोग नहीं कर सकते। "

यदि आपका डेटा मॉडल अधिक जटिल है जो सिर्फ एक उपयोगकर्ता नाम और एक पासवर्ड है, तो आप अभी भी ऐसा कर सकते हैं (जैसा कि ऊपर बताया गया है)

$http({
     method: 'POST',
     url: 'api_endpoint',
     headers: {'Content-Type': 'application/x-www-form-urlencoded'},
     data: json_formatted_data,
     transformRequest: function(data, headers) {
          return transform_json_to_urlcoded(data); // iterate over fields and chain key=value separated with &, using encodeURIComponent javascript function
     }
}).then(function(response) {
  // on succes
}, function(response) {
  // on error
});

कैन के लिए दस्तावेज़ यहाँencodeURIComponent पाया जा सकता है

Answer 6

यदि यह एक फार्म हैडर को बदलने की कोशिश करता है:

headers[ "Content-type" ] = "application/x-www-form-urlencoded; charset=utf-8";

और अगर यह एक फार्म और एक साधारण जसन नहीं है तो इस हेडर को आज़माएं:

headers[ "Content-type" ] = "application/json";

Comments

कुछ भी प्राप्त नहीं। मुझे अभी भी खाली $_POSTसरणी मिली है !

— वीर श्रीवास्तव

क्या यह $ http कॉल आपके कंट्रोलर में है?

— V31

एक और बात अपने सर्वर अंत php है?

— V31

मैं उसी के लिए एक समाधान मिल गया है आप अभी भी समस्या @Veer हो रही है?

— V31

Answer 7

$http({

    method: "POST",
    url: "/server.php",
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    data: "name='Олег'&age='28'",


}).success(function(data, status) {
    console.log(data);
    console.log(status);
});

Comments

कोड केवल उत्तर समुदाय के लिए उपयोगी नहीं हैं। कृपया जवाब कैसे दें

— abpatil

Answer 8

से $ http डॉक्स इस काम करना चाहिए ..

  $http.post(url, data,{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
    .success(function(response) {
         // your code...
     });

Comments

@ केविन मुझे इस बारे में निश्चित नहीं है लेकिन..नहीं जब मैंने एक तार भेजने की कोशिश की तो मुझे एक त्रुटि दिखाई दी

— श्रीनाथ

@KevinB Fine..I it..i लगता है हेडर, जबकि एक स्ट्रिंग भेजे परिवर्तित करने की आवश्यकता है मिल गया .. stackoverflow.com/a/20276775/2466168

— श्रीनाथ

ध्यान दें कि सही भेजने से headersप्रभावित नहीं होगा dataजो अभी भी urlencoded होना चाहिए, एक ही रास्ता या कोई अन्य।

— बोअज

डेटा अभी भी json में भेजा गया है आपको डेटा को x-www-form-urlencoded में एन्कोड करना होगा बस एक हेडर जोड़ना पर्याप्त नहीं है

— wendellmva

Answer 9

आपको सादे जावास्क्रिप्ट ऑब्जेक्ट को पोस्ट करने की आवश्यकता है, और कुछ नहीं

           var request = $http({
                method: "post",
                url: "process.cfm",
                transformRequest: transformRequestAsFormPost,
                data: { id: 4, name: "Kim" }
            });

            request.success(
                function( data ) {
                    $scope.localData = data;
                }
            );

यदि आपके पास बैक-एंड के रूप में php है, तो आपको कुछ और संशोधन करने की आवश्यकता होगी .. php सर्वर साइड को ठीक करने के लिए इस लिंक को चेकआउट करें

Comments

यह बिल्कुल नहीं है कि उसने क्या पूछा, उसने विशेष रूप से पूछा कि वह उन्हें एक्स-www-फॉर्म-यूरलेंकोडेड के रूप में कैसे प्राप्त कर सकता है, क्योंकि वह पोस्ट किए गए जौन सामान के साथ मुद्दों में चल रहा है।

— पेप्परमैन

@ppetermann क्या आपने सवाल के संपादित इतिहास को डाउनवोट करने से पहले जांचा है ..

— harishr

Answer 10

हालांकि एक देर से जवाब, मैंने पाया कि कोणीय UrlSearchParams ने मेरे लिए बहुत अच्छा काम किया, यह मापदंडों के एन्कोडिंग का भी ख्याल रखता है।

let params = new URLSearchParams();
params.set("abc", "def");

let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded'});
let options = new RequestOptions({ headers: headers, withCredentials: true });
this.http
.post(UrlUtil.getOptionSubmitUrl(parentSubcatId), params, options)
.catch();

Answer 11

इसने मेरे लिए काम किया। मैं फ्रंट-एंड के लिए कोणीय और बैक-एंड के लिए लार्वा php का उपयोग करता हूं। मेरी परियोजना में, कोणीय वेब लार्वा बैक-एंड को जोंस डेटा भेजता है।

यह मेरा कोणीय नियंत्रक है।

var angularJsApp= angular.module('angularJsApp',[]);
angularJsApp.controller('MainCtrl', function ($scope ,$http) {

    $scope.userName ="Victoria";
    $scope.password ="password"


       $http({
            method :'POST',
            url:'http://api.mywebsite.com.localhost/httpTest?callback=JSON_CALLBACK',
            data: { username :  $scope.userName , password: $scope.password},
            headers: {'Content-Type': 'application/json'}
        }).success(function (data, status, headers, config) {
            console.log('status',status);
            console.log('data',status);
            console.log('headers',status);
        });

});

यह मेरी php बैक-एंड लार्वेल कंट्रोलर है।

public function httpTest(){
        if (Input::has('username')) {
            $user =Input::all();
            return  Response::json($user)->setCallback(Input::get('callback'));
        }
    }

यह मेरी लार्वा रूटिंग है

Route::post('httpTest','HttpTestController@httpTest');

ब्राउज़र में परिणाम है

स्थिति 200
डेटा JSON_CALLBACK ({"उपयोगकर्ता नाम": "विक्टोरिया", "पासवर्ड": "पासवर्ड", "कॉलबैक": "JSON_CALLBACK"}); httpTesting.js: 18 हेडर फंक्शन (c) {a (a (sc (b)); वापसी c? ([K (c)] || नल: a}

क्रोम एक्सटेंशन है जिसे पोस्टमैन कहा जाता है। आप अपने बैक-एंड url का परीक्षण करने के लिए उपयोग कर सकते हैं कि यह काम कर रहा है या नहीं। https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en

उम्मीद है, मेरा जवाब आपकी मदद करेगा।