jquery $ से .ajax से कोणीय $ http

Question

मेरे पास jQuery कोड का यह टुकड़ा है जो ठीक क्रॉस मूल काम करता है:

jQuery.ajax({
    url: "http://example.appspot.com/rest/app",
    type: "POST",
    data: JSON.stringify({"foo":"bar"}),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (response) {
        console.log("success");
    },
    error: function (response) {
        console.log("failed");
    }
});

अब मैं इसे बिना किसी सफलता के Angular.js कोड में बदलने की कोशिश कर रहा हूँ:

$http({
    url: "http://example.appspot.com/rest/app",
    dataType: "json",
    method: "POST",
    data: JSON.stringify({"foo":"bar"}),
    headers: {
        "Content-Type": "application/json; charset=utf-8"
    }
}).success(function(response){
    $scope.response = response;
}).error(function(error){
    $scope.error = error;
});

किसी भी मदद की सराहना की।

Comments

कोणीय पता नहीं है। लेकिन शायद असफल () एक फ़ंक्शन का गलत नाम है?

— बोगदान रयबाक

एक और simular मुद्दा stackoverflow.com/questions/11786562/…

— अंतहीन

एक समाधान stackoverflow.com/questions/12111936/… गहरी खुदाई करने की आवश्यकता हो सकती है पाया ...

— अंतहीन

विकल्प अनुरोध एक ब्राउज़र द्वारा जारी किया जाएगा, यह AngularJS / आपके आवेदन के लिए पारदर्शी होगा। यदि विकल्प सफल होता है तो मूल अनुरोध (POST / GET / जो भी होगा) का पालन करेगा और आपके कोड को मुख्य अनुरोध के लिए वापस बुलाया जाएगा विकल्प एक नहीं।

— pkozlowski.opensource

शायद यह कोणीय विकल्प के लिए अनुरोध विधि को बदल नहीं रहा है। यह शायद आपके ब्राउज़र की जाँच है कि यह एक कोर अनुरोध कर सकता है। यदि आप किसी अलग डोमेन पर कॉल करने का प्रयास कर रहे हैं तो आपका ब्राउज़र पहले यह देखने के लिए एक विकल्प अनुरोध करेगा कि क्या इसकी अनुमति है।

— इयान

Answer 1

$ Http कॉल करने का AngularJS तरीका इस तरह दिखेगा:

$http({
    url: "http://example.appspot.com/rest/app",
    method: "POST",
    data: {"foo":"bar"}
}).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.data = response.data;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        $scope.error = response.statusText;
});

या शॉर्टकट तरीकों का उपयोग करके और भी सरल लिखा जा सकता है:

$http.post("http://example.appspot.com/rest/app", {"foo":"bar"})
.then(successCallback, errorCallback);

ध्यान देने योग्य बातें हैं:

• AngularJS संस्करण अधिक संक्षिप्त है (विशेष रूप से .post () विधि)
• AngularJS JS वस्तुओं को JSON स्ट्रिंग में परिवर्तित करने और हेडर सेट करने का ध्यान रखेगा (वे अनुकूलन योग्य हैं)
• कॉलबैक फ़ंक्शन नाम successऔर errorक्रमशः (प्रत्येक कॉलबैक के मापदंडों पर भी ध्यान दें) - कोणीय v1.5 में चित्रित
• thenइसके बजाय फ़ंक्शन का उपयोग करें ।
• thenउपयोग की अधिक जानकारी यहां पाई जा सकती है

उपरोक्त सिर्फ एक त्वरित उदाहरण है और कुछ संकेत हैं, अधिक के लिए AngularJS प्रलेखन की जांच करना सुनिश्चित करें: http://docs.angularjs.org/api/ng.$http

Comments

जानकार अच्छा लगा! हालाँकि, मैं इसकी क्लाइंट त्रुटि के बारे में बात नहीं कर रहा हूँ, कोणीय विकल्प के लिए अनुरोध विधि बदल जाते हैं। मुझे लगता है कि मुझे इसका समर्थन करने के लिए कुछ सर्वर साइड सामान करना होगा

— अंतहीन

हाँ, मुझे लगता है कि आपको पहले सर्वर-साइड समस्याओं को हल करने की आवश्यकता है। तब आप ग्राहक पक्ष पर कोणीय $ http की पूरी शक्ति का आनंद लेने में सक्षम होंगे। संभवतः आपको jQuery की तुलना में AngularJS अधिक / अलग हेडर भेज रहा है, क्योंकि आप एक अतिरिक्त विकल्प अनुरोध देखते हैं।

— pkozlowski.opensource

नोट: "

— परमेस

paramsऔर data2 अलग-अलग चीजें हैं: डेटा के दौरान URL (क्वेरी स्ट्रिंग) में अंत तक - अनुरोध बॉडी में (केवल अनुरोध प्रकारों के लिए जो वास्तव में शरीर हो सकते हैं)।

— pkozlowski.opensource

"कोणीय ने विकल्प के लिए अनुरोध विधि को बदल दिया है। मुझे लगता है कि मुझे इसका समर्थन करने के लिए कुछ सर्वर साइड सामान करना होगा" मुझे वही समस्या हो रही है, कोणीय कि jquery doesnt क्या जोड़ता है?

— एंड्रयू लुह्रिंग

Answer 2

हम AngularJs में http सेवा का उपयोग करके अजाक्स अनुरोध को लागू कर सकते हैं, जो दूरस्थ सर्वर से डेटा को पढ़ने / लोड करने में मदद करता है।

$ http सेवा विधियाँ नीचे सूचीबद्ध हैं,

 $http.get()
 $http.post()
 $http.delete()
 $http.head()
 $http.jsonp()
 $http.patch()
 $http.put()

उदाहरण में से एक:

    $http.get("sample.php")
        .success(function(response) {
            $scope.getting = response.data; // response.data is an array
    }).error(){

        // Error callback will trigger
    });

http://www.drtuts.com/ajax-requests-angularjs/

Answer 3

आप इसका उपयोग कर सकते हैं:

"कोणीय-पोस्ट-फिक्स" डाउनलोड करें: "^ 0.1.0"

फिर कोणीय मॉड्यूल की घोषणा करते हुए अपनी निर्भरता में 'httpPostFix' जोड़ें।

रेफरी: https://github.com/PabloDeGrote/angular-httppostfix

Answer 4

आप डेटा असाइन करने के लिए $ .param का उपयोग कर सकते हैं:

 $http({
  url: "http://example.appspot.com/rest/app",
  method: "POST",
  data: $.param({"foo":"bar"})
  }).success(function(data, status, headers, config) {
   $scope.data = data;
  }).error(function(data, status, headers, config) {
   $scope.status = status;
 });

इसे देखें: AngularJS + ASP.NET वेब एपीआई क्रॉस-डोमेन समस्या

Comments

बस एक नोट है कि $ .param jQuery है, इसलिए आपको इसका उपयोग करने के लिए jQuery लोड करने की आवश्यकता होगी। $ Http ट्रांसफॉर्मर इंटरसेप्टर का उपयोग करके एक jQuery- मुक्त उदाहरण के लिए, pastebin.com/zsn9ASkM

— ब्रायन

@Brian एक मिनट रुको, jQuery को AngularJS की निर्भरता नहीं है? JQuery के बिना पहले लोड किए जाने पर आपके पास कभी भी $ http नहीं होगा।

— jnm2

@ jnm2 - नहीं, jQuery, AngularJS की निर्भरता नहीं है। $ http से तात्पर्य कोणीय $ http सेवा घटक से है , jQuery से कुछ भी नहीं। AngularJS के पास DOM में हेरफेर करने के लिए "jQuery लाइट" उपलब्ध है, लेकिन यह बहुत सीमित है। से कोणीय तत्व - अगर jQuery उपलब्ध है, angular.element jQuery समारोह के लिए एक उपनाम है। यदि jQuery उपलब्ध नहीं है, तो angular.element Angular के बिल्ट-इन सबटाइटल को दर्शाता है, जिसे "jQuery lite" या "jqLite" कहा जाता है।

— ब्रायन