AngularJS + PHP। $ Http सेवा को jQuery.ajax की तरह व्यवहार करना ()

$http.post() में शुरुआती अक्सर भ्रमित होते हैं क्योंकि $ http सेवा (जैसे $http.post() ) के फास्ट फ़ंक्शंस, समान Jquery फ़ंक्शंस (जैसे jQuery.post() ) के साथ विनिमेय नहीं हैं, इस तथ्य के बावजूद कि संबंधित मैनुअल एक समान तरीके से उनके उपयोग का वर्णन करते हैं। यही है, अगर इस से पहले Gickery में कोड इस तरह दिखता है:

 (function($) { jQuery.post('/endpoint', { foo: 'bar' }).success(function(response) { // ... }); })(jQuery); 

आप पा सकते हैं कि निम्न कोणीय में बॉक्स से बाहर काम नहीं करेगा:

 var MainCtrl = function($scope, $http) { $http.post('/endpoint', { foo: 'bar' }).success(function(response) { // ... }); }; 

आपके सामने आने वाली समस्या यह है कि सर्वर को कोणीय अनुरोध से { foo: 'bar' } पैरामीटर नहीं मिल सकता है।

अंतर यह है कि जिस तरह से जिकरी और कोणीय क्रमबद्ध और डेटा संचारित होता है। असल में, समस्या उस भाषा में है जिसमें सर्वर भाग लिखा गया है और जो बस डिफ़ॉल्ट सेटिंग्स के साथ कोणीय के हस्तांतरण को नहीं समझता है - लानत शर्म की बात है, क्योंकि निश्चित रूप से कोणीय, कुछ भी गलत नहीं करता है। डिफ़ॉल्ट रूप से, Gickery Content-Type: x-www-form-urlencoded और परिचित पंक्ति foo=bar&baz=moe का उपयोग करके डेटा स्थानांतरित करता है। कोणीय, हालांकि, Content-Type: application/json और { "foo": "bar", "baz": "moe" } का उपयोग करके डेटा प्रसारित करता है Content-Type: application/json JSON स्ट्रिंग, जो दुर्भाग्य से, कुछ सर्वर भाषाओं - विशेष रूप से PHP - शुरू में नहीं है वस्तु में बदलना।

सौभाग्य से, Angular Developers ने हमारे सभी कार्यक्रमों के लिए x-www-form-urlencoded को स्थापित करने के लिए $ http सेवा के साथ इस पद्धति का समर्थन करने का ध्यान रखा। फ़ोरम और स्टैकऑवरफ़्लो पर कई समाधान पेश किए जाते हैं, लेकिन वे आदर्श नहीं हैं क्योंकि उन्हें सर्वर कोड या $ http नीति योजना को बदलने की आवश्यकता होती है। इसलिए, मैं आपके लिए सर्वोत्तम संभव समाधान प्रस्तुत करता हूं, जिसमें सर्वर या क्लाइंट कोड में बदलाव की आवश्यकता नहीं है, लेकिन एप्लिकेशन मॉड्यूल की सेटिंग में $ http के संचालन में कुछ मामूली बदलाव करने की पेशकश करता है:

 //    ... angular.module('MyModule', [], function($httpProvider) { //  x-www-form-urlencoded Content-Type $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'; //   transformRequest  $http- $httpProvider.defaults.transformRequest = [function(data) { /** *  ;    x-www-form-urlencoded . * @param {Object} obj * @return {String} */ var param = function(obj) { var query = ''; var name, value, fullSubName, 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; }; return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data; }]; }); 

नोट: ऊपर दिए गए बड़े स्निपेट को हमेशा param() फ़ंक्शन के साथ उपयोग किया जाना चाहिए। इसके बजाय jQuery.param() उपयोग न करें जब आप jQuery.param() को पास किए गए $ संसाधन वर्ग के हर तरीके को अस्वीकार कर देंगे, तो आप कोणीय के $ संसाधन का उपयोग करने का प्रयास करने के कारण अराजकता पैदा होगी! (यह jQuery की एक विशेषता है जिसके कारण पैरामीटर के लिए ऑब्जेक्ट के गुणों को कहा जाता है जिसमें फ़ंक्शन शामिल होते हैं और उनके द्वारा लौटाए गए मान को पैरामीटर के रूप में उपयोग किया जाता है, लेकिन एंगुलर के मामले में, यह विनाशकारी हो सकता है, क्योंकि हम आमतौर पर "वास्तविक" इंस्टेंस को विधियों और टी के साथ स्थानांतरित करते हैं। .D।)

बस ऊपर स्निपेट का उपयोग करें और सब कुछ ठीक हो जाएगा!

अब हम $http.post() और अन्य समान तरीकों का उपयोग करके आगे बढ़ सकते हैं, यह मानते हुए कि मौजूदा सर्वर कोड x-www-form-urlencoded डेटा की अपेक्षा करता है। हर रोज़ के लिए अंतिम परिणाम के कुछ उदाहरण यहां दिए गए हैं, पूरा कोड (आप क्या उम्मीद करते हैं और सपने देखते हैं) का एक उदाहरण:

HTML टेम्पलेट

 <div ng-app="MyModule" ng-controller="MainCtrl"> <p ng-show="loading">Loading...</p> <p ng-hide="loading">Response: {{response}}</p> </div> 

ग्राहक कोड (AngularJS)

 var MainCtrl = function($scope, $http) { $scope.loading = true; $http.post('/endpoint', { foo: 'bar' }).success(function(response) { $scope.response = response; $scope.loading = false; }); }; 

सर्वर कोड (PHP)

 < ? header('Content-Type: application/json'); // -! $_POST  ; PHP   //      echo json_encode($_POST); ?> 

अन्य नोट
सवाल यह है कि क्या अब भी PHP में Angular's JSON के अनुरोध को पढ़ना संभव है? ठीक है, निश्चित रूप से, यदि आप PHP इनपुट स्ट्रीम पढ़ते हैं और JSON को डिकोड करते हैं:

 < ? $params = json_decode(file_get_contents('php://input')); //  ,     PHP  (. ) $params = json_decode(trim(file_get_contents('php://input')), true); ?> 

स्पष्ट दोष यह है कि कोड थोड़ा कम सहज है (हम सभी के बाद $ _POST के लिए उपयोग किए जाते हैं), और यदि सर्वर हैंडलर पहले से ही $ _POST का उपयोग करके लिखे गए हैं, तो आपको सर्वर कोड को फिर से लिखना होगा। यदि आप एक अच्छी रूपरेखा का उपयोग करते हैं, तो आप संभवतः वैश्विक परिवर्तन कर सकते हैं, ताकि इनपुट हैंडलर पारदर्शी रूप से JSON अनुरोधों को परिभाषित कर सके, लेकिन मैं इसे समाप्त करता हूं।

अनुवादक का ध्यान दें: यदि संभव हो तो, Content-Type: application/json को स्वीकार करने के लिए सर्वर को कॉन्फ़िगर करना बेहतर है, जो अधिक तार्किक है। आलेख चरम मामलों के लिए दृष्टिकोण का वर्णन करता है जब सर्वर पर कुछ भी नहीं किया जा सकता है।

Additive। नर्व से सप्लीमेंट

 'use strict'; (function() { angular.extend( angular, { toParam: toParam }); /** *  ,      , *       url *   [url]http://api.jquery.com/jQuery.param/[/url] *  [url]http://stackoverflow.com/questions/1714786/querystring-encoding-of-a-javascript-object/1714899#1714899[/url] * * @param object * @param [prefix] * @returns {string} */ function toParam( object, prefix ) { var stack = []; var value; var key; for( key in object ) { value = object[ key ]; key = prefix ? prefix + '[' + key + ']' : key; if ( value === null ) { value = encodeURIComponent( key ) + '='; } else if ( typeof( value ) !== 'object' ) { value = encodeURIComponent( key ) + '=' + encodeURIComponent( value ); } else { value = toParam( value, key ); } stack.push( value ); } return stack.join( '&' ); } }()); 

 'use strict'; // change default settings var app = angular.module( 'app', [ ... ]); app .config( function( $httpProvider ) { // [url]http://habrahabr.ru/post/181009/[/url] $httpProvider.defaults.headers.post[ 'Content-Type' ] = 'application/x-www-form-urlencoded;charset=utf-8'; $httpProvider.defaults.transformRequest = function( data ) { return angular.isObject( data ) && String( data ) !== '[object File]' ? angular.toParam( data ) : data; }; });