ajax - मैं अनुरोध पेलोड के बजाय डेटा डेटा के रूप में डेटा कैसे पोस्ट कर सकता हूं?




angularjs post (14)

नीचे दिए गए कोड में, AngularJS $http विधि URL को कॉल करती है, और xsrf ऑब्जेक्ट को "अनुरोध पेलोड" के रूप में सबमिट करती है (जैसा कि क्रोम डीबगर नेटवर्क टैब में वर्णित है)। JQuery $.ajax विधि एक ही कॉल करता है, लेकिन xsrf को "फॉर्म डेटा" के रूप में सबमिट करता है।

मैं AngularJS को अनुरोध पेलोड के बजाय xsrf को फ़ॉर्म डेटा के रूप में कैसे सबमिट कर सकता हूं?

var url = 'http://somewhere.com/';
var xsrf = {fkey: 'xsrf key'};

$http({
    method: 'POST',
    url: url,
    data: xsrf
}).success(function () {});

$.ajax({
    type: 'POST',
    url: url,
    data: xsrf,
    dataType: 'json',
    success: function() {}
});

AngularJS $http सेवा का उपयोग करें और इसकी post विधि का उपयोग करें या $http फ़ंक्शन कॉन्फ़िगर करें।


AngularJS v1.4.0 के रूप में, एक अंतर्निहित $httpParamSerializer सेवा है जो दस्तावेज़ पृष्ठ पर सूचीबद्ध नियमों के अनुसार किसी भी ऑब्जेक्ट को HTTP अनुरोध के एक हिस्से में परिवर्तित करती है।

इसका इस्तेमाल इस तरह किया जा सकता है:

$http.post('http://example.com', $httpParamSerializer(formDataObj)).
    success(function(data){/* response status 200-299 */}).
    error(function(data){/* response status 400-999 */});

याद रखें कि एक सही फॉर्म पोस्ट के लिए, Content-Type शीर्षलेख बदला जाना चाहिए। सभी POST अनुरोधों के लिए वैश्विक स्तर पर ऐसा करने के लिए, यह कोड (अल्बिरेओ के आधा उत्तर से लिया गया) का उपयोग किया जा सकता है:

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

केवल वर्तमान पोस्ट के लिए ऐसा करने के लिए, अनुरोध-ऑब्जेक्ट की headers संपत्ति को संशोधित करने की आवश्यकता है:

var req = {
 method: 'POST',
 url: 'http://example.com',
 headers: {
   'Content-Type': 'application/x-www-form-urlencoded'
 },
 data: $httpParamSerializer(formDataObj)
};

$http(req);

Symfony2 उपयोगकर्ताओं के लिए:

यदि आप काम करने के लिए अपने जावास्क्रिप्ट में कुछ भी नहीं बदलना चाहते हैं तो आप symfony ऐप में इन संशोधनों को कर सकते हैं:

एक वर्ग बनाएं जो Symfony \ Component \ HttpFoundation \ Request class को बढ़ाती है:

<?php

namespace Acme\Test\MyRequest;

use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\ParameterBag;

class MyRequest extends Request{


/**
* Override and extend the createFromGlobals function.
* 
* 
*
* @return Request A new request
*
* @api
*/
public static function createFromGlobals()
{
  // Get what we would get from the parent
  $request = parent::createFromGlobals();

  // Add the handling for 'application/json' content type.
  if(0 === strpos($request->headers->get('CONTENT_TYPE'), 'application/json')){

    // The json is in the content
    $cont = $request->getContent();

    $json = json_decode($cont);

    // ParameterBag must be an Array.
    if(is_object($json)) {
      $json = (array) $json;
  }
  $request->request = new ParameterBag($json);

}

return $request;

}

}

अब app_dev.php (या आपके द्वारा उपयोग की जाने वाली किसी भी इंडेक्स फ़ाइल) में कक्षा का उपयोग करें

// web/app_dev.php

$kernel = new AppKernel('dev', true);
// $kernel->loadClassCache();
$request = ForumBundleRequest::createFromGlobals();

// use your class instead
// $request = Request::createFromGlobals();
$response = $kernel->handle($request);
$response->send();
$kernel->terminate($request, $response);

आप नीचे समाधान के साथ प्रयास कर सकते हैं

$http({
        method: 'POST',
        url: url-post,
        data: data-post-object-json,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        transformRequest: function(obj) {
            var str = [];
            for (var key in obj) {
                if (obj[key] instanceof Array) {
                    for(var idx in obj[key]){
                        var subObj = obj[key][idx];
                        for(var subKey in subObj){
                            str.push(encodeURIComponent(key) + "[" + idx + "][" + encodeURIComponent(subKey) + "]=" + encodeURIComponent(subObj[subKey]));
                        }
                    }
                }
                else {
                    str.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]));
                }
            }
            return str.join("&");
        }
    }).success(function(response) {
          /* Do something */
        });

आपके ऐप कॉन्फ़िगरेशन में -

$httpProvider.defaults.transformRequest = function (data) {
        if (data === undefined)
            return data;
        var clonedData = $.extend(true, {}, data);
        for (var property in clonedData)
            if (property.substr(0, 1) == '$')
                delete clonedData[property];

        return $.param(clonedData);
    };

आपके संसाधन अनुरोध के साथ -

 headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }

इस मुद्दे के आस-पास निरंतर भ्रम ने मुझे इसके बारे में एक ब्लॉग पोस्ट लिखने के लिए प्रेरित किया। इस पोस्ट में प्रस्तावित समाधान आपके वर्तमान शीर्ष रेटेड समाधान से बेहतर है क्योंकि यह आपको $ http सेवा कॉल के लिए अपने डेटा ऑब्जेक्ट को पैरामीट्रिज करने के लिए प्रतिबंधित नहीं करता है; यानी मेरे समाधान के साथ आप वास्तविक डेटा ऑब्जेक्ट्स को $ http.post () इत्यादि में पास करना जारी रख सकते हैं और अभी भी वांछित परिणाम प्राप्त कर सकते हैं।

साथ ही, शीर्ष रेटेड उत्तर $ .param () फ़ंक्शन के लिए पृष्ठ में पूर्ण jQuery को शामिल करने पर निर्भर करता है, जबकि मेरा समाधान jQuery अज्ञेयवादी, शुद्ध AngularJS तैयार है।

http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

उम्मीद है की यह मदद करेगा।


जब आप अपना $ http ऑब्जेक्ट बनाते हैं तो आपको "डेटा" की बजाय संपत्ति "पैराम्स" का उपयोग करना एकमात्र पतला है:

$http({
   method: 'POST',
   url: serviceUrl + '/ClientUpdate',
   params: { LangUserId: userId, clientJSON: clients[i] },
})

ऊपर दिए गए उदाहरणों में उदाहरण [i] सिर्फ JSON ऑब्जेक्ट है (किसी भी तरह से क्रमबद्ध नहीं है)। यदि आप "डेटा" कोणीय के बजाय "पैरा" का उपयोग करते हैं तो आप $ httpParamSerializer का उपयोग कर ऑब्जेक्ट को क्रमबद्ध करेंगे: https://docs.angularjs.org/api/ng/service/ $ httpParamSerializer


निम्न पंक्ति को $ http ऑब्जेक्ट में जोड़ा जाना आवश्यक है:

headers: {'Content-Type': 'application/x-www-form-urlencoded'}

और पारित डेटा को यूआरएल-एन्कोडेड स्ट्रिंग में परिवर्तित किया जाना चाहिए:

> $.param({fkey: "key"})
'fkey=key'

तो आपके पास कुछ ऐसा है:

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

प्रेषक: https://groups.google.com/forum/#!msg/angular/5nAedJ1LyO0/4Vj_72EZcDsJ


पोस्ट के लिए एडाप्टर सेवा बनाएं:

services.service('Http', function ($http) {

    var self = this

    this.post = function (url, data) {
        return $http({
            method: 'POST',
            url: url,
            data: $.param(data),
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        })
    }

}) 

इसे अपने नियंत्रकों या जो कुछ भी प्रयोग करें:

ctrls.controller('PersonCtrl', function (Http /* our service */) {
    var self = this
    self.user = {name: "Ozgur", eMail: null}

    self.register = function () {
        Http.post('/user/register', self.user).then(function (r) {
            //response
            console.log(r)
        })
    }

})

बस सामग्री-प्रकार सेट करें पर्याप्त नहीं है, भेजने से पहले यूआरएल एनकोड फॉर्म डेटा। $http.post(url, jQuery.param(data))


मैंने कुछ अन्य उत्तरों को लिया और कुछ क्लीनर बनाया, अपने app.js में अपने angular.module के अंत में यह .config() कॉल डालें:

.config(['$httpProvider', function ($httpProvider) {
  // Intercept POST requests, convert to standard form encoding
  $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
  $httpProvider.defaults.transformRequest.unshift(function (data, headersGetter) {
    var key, result = [];

    if (typeof data === "string")
      return data;

    for (key in data) {
      if (data.hasOwnProperty(key))
        result.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
    }
    return result.join("&");
  });
}]);

यदि आप समाधान में jQuery का उपयोग नहीं करना चाहते हैं तो आप इसे आजमा सकते हैं। यहां से https://.com/a/1714899/1784301 समाधान को हल किया गया

$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: xsrf
}).success(function () {});

ये उत्तर पागल ओवरकिल की तरह दिखते हैं, कभी-कभी, सरल बस बेहतर होता है:

$http.post(loginUrl, "userName=" + encodeURIComponent(email) +
                     "&password=" + encodeURIComponent(password) +
                     "&grant_type=password"
).success(function (data) {
//...

वास्तव में एक अच्छा ट्यूटोरियल है जो इस और अन्य संबंधित सामानों पर जाता है - AJAX फॉर्म सबमिट करना: AngularJS Way

असल में, आपको POST अनुरोध के शीर्षलेख को इंगित करने की आवश्यकता है कि आप URL डेटा एन्कोडेड स्ट्रिंग के रूप में फ़ॉर्म डेटा भेज रहे हैं, और डेटा को उसी प्रारूप में भेजने के लिए सेट करें

$http({
  method  : 'POST',
  url     : 'url',
  data    : $.param(xsrf),  // pass in data as strings
  headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
});

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







angular-http