javascript - AngularJS-JSON के बजाय अनुरोध पैरामीटर भेजने के लिए $ http.post के लिए कोई भी तरीका?




jquery (8)

मेरे पास कुछ पुराना कोड है जो jQuery की पोस्ट विधि के माध्यम से AJAX POST अनुरोध कर रहा है और ऐसा कुछ दिखता है:

$.post("/foo/bar", requestData,
    function(responseData)
    {
        //do stuff with response
    }

requestData कुछ बुनियादी स्ट्रिंग गुणों के साथ सिर्फ एक जावास्क्रिप्ट ऑब्जेक्ट है।

मैं कोणीय का उपयोग करने के लिए अपनी सामग्री को आगे बढ़ाने की प्रक्रिया में हूं, और मैं इस कॉल को $ http.post से बदलना चाहता हूं। मैं निम्नलिखित के साथ आया था:

$http.post("/foo/bar", requestData).success(
    function(responseData) {
        //do stuff with response
    }
});

जब मैंने ऐसा किया, तो मुझे सर्वर से 500 त्रुटि प्रतिक्रिया मिली। फायरबग का उपयोग करके, मैंने पाया कि इसने अनुरोध निकाय को इस तरह भेजा है:

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

सफल jQuery $.post इस तरह के शरीर को भेजता है:

param1=value1&param2=value2&param3=value3

मैं जिस अंतराल पर मार रहा हूं वह अनुरोध पैरामीटर की अपेक्षा कर रहा है, न कि JSON। तो, मेरा सवाल है कि $http.post ऑब्जेक्ट को जेएसओएन के बजाय अनुरोध पैरामीटर के रूप में भेजने के लिए $http.post को बताने के लिए वैसे भी है? हां, मुझे पता है कि मैं ऑब्जेक्ट से स्वयं स्ट्रिंग का निर्माण कर सकता हूं, लेकिन मैं जानना चाहता हूं कि क्या कोणीय बॉक्स के बाहर कुछ भी प्रदान करता है या नहीं।


AngularJS दस्तावेज से:

पैरा - {ऑब्जेक्ट।} - स्ट्रिंग्स या ऑब्जेक्ट्स का मानचित्र जो यूआरएल के बाद चालू हो जाएगा? key1 = value1 और key2 = value2। यदि मान स्ट्रिंग नहीं है , तो यह JSONified होगा।

तो, पैरामीटर के रूप में स्ट्रिंग प्रदान करते हैं। यदि आप इसे नहीं चाहते हैं, तो परिवर्तनों का उपयोग करें। फिर से, दस्तावेज़ीकरण से:

स्थानीय रूप से इन परिवर्तनों को ओवरराइड करने के लिए, रूपांतरण कार्यों को ट्रांसफॉर्म के रूप में निर्दिष्ट करें और / या कॉन्फ़िगरेशन ऑब्जेक्ट के ट्रांसफॉर्म गुण गुण। वैश्विक रूप से डिफ़ॉल्ट रूप से ओवरराइड करने के लिए, $ httpProvider.defaults.transformRequest और $ httpProvider.defaults.transformResponse गुण $ httpProvider के ओवरराइड करें।

अधिक जानकारी के लिए documentation संदर्भ लें।


आप सर्वर में कोड बदलने के बिना इस समस्या को हल कर सकते हैं, $http.post कॉल में हेडर बदल $http.post हैं और नियमित रूप से $_POST का उपयोग कर सकते हैं। यहां समझाया गया: http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/


त्वरित समायोजन - आप में से उन लोगों के लिए जिन्हें ट्रांसफॉर्मरवेस्ट फ़ंक्शन की वैश्विक कॉन्फ़िगरेशन में परेशानी हो रही है, यहां स्निपेट है जिसका उपयोग मैं छुटकारा पाने के लिए Cannot read property 'jquery' of undefined हूं Cannot read property 'jquery' of undefined त्रुटि Cannot read property 'jquery' of undefined :

$httpProvider.defaults.transformRequest = function(data) {
        return data != undefined ? $.param(data) : null;
    }

ध्यान दें कि कोणीय 1.4 के रूप में, आप jQuery का उपयोग किए बिना फ़ॉर्म डेटा को क्रमबद्ध कर सकते हैं।

App.js में:

module.run(function($http, $httpParamSerializerJQLike) {
  $http.defaults.transformRequest.unshift($httpParamSerializerJQLike);
});

फिर अपने नियंत्रक में:

$http({
    method: 'POST',
    url: myUrl',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: myData
});

मुझे लगता है कि params कॉन्फ़िगर पैरामीटर यहां काम नहीं करेगा क्योंकि यह शरीर के बजाय यूआरएल में स्ट्रिंग जोड़ता है लेकिन इन्फ्लिगो को यहां जो भी सुझाव दिया गया है, उसे जोड़ने के लिए एक डिफ़ॉल्ट ट्रांसफॉर्म के वैश्विक ओवरराइड का एक उदाहरण है (उदाहरण के लिए jQuery param का उपयोग करना डेटा को पर्म स्ट्रिंग में कनवर्ट करें)।

ग्लोबल ट्रांसफॉर्म सेट अपक्वेट फ़ंक्शन सेट करें:

var app = angular.module('myApp');

app.config(function ($httpProvider) {
    $httpProvider.defaults.transformRequest = function(data){
        if (data === undefined) {
            return data;
        }
        return $.param(data);
    }
});

इस तरह से $ http.post पर सभी कॉल स्वचालित रूप से jQuery $.post कॉल द्वारा उपयोग किए गए उसी पैरामीटर प्रारूप में शरीर को बदल देंगे।

ध्यान दें कि आप सामग्री-प्रकार शीर्षलेख प्रति कॉल या वैश्विक रूप से इस तरह सेट करना भी चाह सकते हैं:

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

नमूना गैर-वैश्विक परिवर्तन प्रति कॉल अनुरोध:

    var transform = function(data){
        return $.param(data);
    }

    $http.post("/foo/bar", requestData, {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
        transformRequest: transform
    }).success(function(responseData) {
        //do stuff with response
    });

मैंने इस पूरे के कई बार समस्याग्रस्त व्यवहार पाया। मैंने इसे एक्सप्रेस (बिना टाइपिंग के) और बॉडी पार्सर (डीटी ~ बॉडी-पार्सर टाइपिंग के साथ) से इस्तेमाल किया।

मैंने पोस्ट स्ट्रिंग में दिए गए JSON को समझने के बजाय बस एक फ़ाइल अपलोड करने का प्रयास नहीं किया था।

request.body । कोई बस एक खाली जेसन ( {} ) था।

बहुत सारी जांच के बाद अंततः यह मेरे लिए काम किया:

import { json } from 'body-parser';
...
app.use(json()); <-- should be defined before the first POST handler!

ग्राहक पक्ष से अनुरोध स्ट्रिंग में application/json सामग्री प्रकार देना भी महत्वपूर्ण हो सकता है।


यह एक हैक का थोड़ा सा हो सकता है, लेकिन मैंने इस मुद्दे से परहेज किया और जेसन को सर्वर की तरफ PHP के POST सरणी में परिवर्तित कर दिया:

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

$.param में JSON डेटा को क्रमबद्ध करने के लिए jQuery का $.param फ़ंक्शन का उपयोग करें।

संक्षेप में, आपके जैसे ही कोड का उपयोग करना:

$http.post("/foo/bar",
$.param(requestData),
{
    headers:
    {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
}
).success(
    function(responseData) {
        //do stuff with response
    }
});

इसका उपयोग करने के लिए, आपको AngularJS के साथ अपने पृष्ठ में jQuery शामिल करना होगा।





angularjs