Verileri istek yükü yerine form verisi olarak nasıl gönderebilirim?

Aşağıdaki kodda, AngularJS $httpyöntemi URL'yi çağırır ve xsrf nesnesini "Yük Taşıma İsteği" olarak gönderir (Chrome hata ayıklayıcı ağ sekmesinde açıklandığı gibi). JQuery $.ajaxyöntemi aynı çağrıyı yapar, ancak xsrf'yi "Form Verileri" olarak gönderir.

AngularJS'nin istek yükü yerine form verisi olarak xsrf göndermesini nasıl sağlayabilirim?

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() {}
});

Geçirilen $ http nesnesine aşağıdaki satırın eklenmesi gerekir:

headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}

Ve iletilen veriler URL kodlu bir dizeye dönüştürülmelidir:

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

Yani şöyle bir şey var:

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

Gönderen: https://groups.google.com/forum/#!msg/angular/5nAedJ1LyO0/4Vj_72EZcDsJ

GÜNCELLEME

AngularJS V1.4 ile eklenen yeni hizmetleri kullanmak için, bkz.

• Yalnızca AngularJS hizmetlerini kullanan URL kodlama değişkenleri

Çözümde jQuery kullanmak istemiyorsanız bunu deneyebilirsiniz. Çözüm buradan iptal edildi https://stackoverflow.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 () {});

Bu konuyla ilgili devam eden karışıklık, bu konuda bir blog yazısı yazmam için bana ilham verdi. Bu yazıda önerdiğim çözüm, mevcut en yüksek puanlı çözümünüzden daha iyidir çünkü sizi $ http servis çağrıları için veri nesnenizi parametrelendirmeyle sınırlamaz; yani benim çözümümle gerçek veri nesnelerini $ http.post (), vb. 'e geçirmeye devam edebilir ve yine de istenen sonucu elde edebilirsiniz.

Ayrıca, en yüksek puanlı cevap, tam jQuery'nin $ .param () işlevi için sayfaya dahil edilmesine dayanırken, benim çözümüm jQuery agnostic, pure AngularJS için hazırdır.

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

Bu yardımcı olur umarım.

Diğer cevaplardan birkaçını aldım ve biraz daha temiz bir şey yaptım, bu .config()çağrıyı app.js'nizdeki açısal.modülünüzün sonuna koydum:

.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("&");
  });
}]);

AngularJS v1.4.0 itibariyle $httpParamSerializer, dokümanlar sayfasında listelenen kurallara göre herhangi bir nesneyi HTTP isteğinin bir bölümüne dönüştüren yerleşik bir hizmet vardır .

Bu şekilde kullanılabilir:

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

Doğru bir form gönderisi için Content-Typebaşlığın değiştirilmesi gerektiğini unutmayın. Bunu tüm POST istekleri için global olarak yapmak için, bu kod (Albireo'nun yarı cevabından alınmıştır) kullanılabilir:

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

Bunu yalnızca geçerli gönderi için yapmak için headers, request nesnesinin özelliğinin değiştirilmesi gerekir:

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

$http(req);

Davranışı global olarak tanımlayabilirsiniz:

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

Yani her seferinde yeniden tanımlamanız gerekmez:

$http.post("/handle/post", {
    foo: "FOO",
    bar: "BAR"
}).success(function (data, status, headers, config) {
    // TODO
}).error(function (data, status, headers, config) {
    // TODO
});

Geçici bir çözüm olarak, POST alan kodun application / json verilerine yanıt vermesini sağlayabilirsiniz. PHP için aşağıdaki kodu ekledim, form kodlu veya JSON'da POST yapmamı sağladım.

//handles JSON posted arguments and stuffs them into $_POST
//angular's $http makes JSON posts (not normal "form encoded")
$content_type_args = explode(';', $_SERVER['CONTENT_TYPE']); //parse content_type string
if ($content_type_args[0] == 'application/json')
  $_POST = json_decode(file_get_contents('php://input'),true);

//now continue to reference $_POST vars as usual

Bu cevaplar çılgınca aşırılık gibi görünüyor, bazen basit sadece daha iyi:

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

Aşağıdaki çözümü deneyebilirsiniz

$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 */
        });

Posta için bir adaptör hizmeti oluşturun:

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'}
        })
    }

}) 

Denetleyicilerinizde veya her neyse kullanın:

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)
        })
    }

})

Bu ve diğer ilgili şeyler üzerinde gerçekten güzel bir öğretici var - AJAX Formları Gönderme: AngularJS Yolu .

Temel olarak, form verilerini URL kodlamalı dize olarak gönderdiğinizi belirtmek için POST isteğinin başlığını ayarlamanız ve verilerin aynı biçimde gönderilecek şekilde ayarlanması gerekir

$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)
});

Verilerin bir dizeye serileştirilmesi için burada jQuery'nin param () yardımcı işlevinin kullanıldığını unutmayın, ancak jQuery kullanmıyorsanız bunu manuel olarak da yapabilirsiniz.

var fd = new FormData();
    fd.append('file', file);
    $http.post(uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    })
    .success(function(){
    })
    .error(function(){
    });

Lütfen ödeme yapın! https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

Symfony2 kullanıcıları için:

Bunun çalışması için javascriptinizde bir şey değiştirmek istemiyorsanız, symfony uygulamasında bu değişiklikleri yapabilirsiniz:

Symfony \ Component \ HttpFoundation \ Request sınıfını genişleten bir sınıf oluşturun:

<?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;

}

}

Şimdi sınıfınızı app_dev.php dosyasında (veya kullandığınız herhangi bir dizin dosyasında) kullanın

// 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);

Sadece İçerik Tipi ayarlamak yeterli değildir, url göndermeden önce form verilerini kodlar. $http.post(url, jQuery.param(data))

Şu anda AngularJS google grubunda bulduğum aşağıdaki çözümü kullanıyorum .

$ http
.post ('/ echo / json /', 'json =' + encodeURIComponent (angular.toJson (veri)), {
    başlıklar: {
        'Content-Type': 'application / x-www-form-urlencoded; karakter kümesi = UTF-8'
    }
}). başarı (işlev (veri)
    $ scope.data = veri;
});

PHP kullanıyorsanız, bunu Request::createFromGlobals()okumak için Symfony 2 HTTP bileşeni gibi bir şey kullanmanız gerekeceğini unutmayın , çünkü $ _POST otomatik olarak yüklenmeyecektir.

AngularJS bunu http-request üstbilgisinde aşağıdaki içerik türünü yaptığı gibi yapıyor:

Content-Type: application/json

Benim gibi php ile, hatta Symfony2 ile gidiyorsanız, sunucu uyumluluğunuzu burada açıklandığı gibi json standardı için genişletebilirsiniz: http://silex.sensiolabs.org/doc/cookbook/json_request_body.html

Symfony2 yolu (örneğin DefaultController'ınızın içinde):

$request = $this->getRequest();
if (0 === strpos($request->headers->get('Content-Type'), 'application/json')) {
    $data = json_decode($request->getContent(), true);
    $request->request->replace(is_array($data) ? $data : array());
}
var_dump($request->request->all());

Avantajı, jQuery parametresini kullanmanız gerekmemesi ve AngularJS'yi bu tür istekleri yapmanın yerel yolu olarak kullanabilmenizdir.

Tam cevap (açısal 1.4'ten beri). De bağımlılığı dahil etmeniz gerekir $ httpParamSerializer

var res = $resource(serverUrl + 'Token', { }, {
                save: { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
            });

            res.save({ }, $httpParamSerializer({ param1: 'sdsd', param2: 'sdsd' }), function (response) {

            }, function (error) { 

            });

Uygulama yapılandırmanızda -

$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);
    };

Kaynak talebinizle -

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

Bu doğrudan bir cevap değil, biraz farklı bir tasarım yönü:

Verileri form olarak değil, doğrudan sunucu tarafı nesnesiyle eşlenecek bir JSON nesnesi olarak gönderin veya REST stili yol değişkenini kullanın

Bir XSRF anahtarını geçmeye çalıştığınız için artık her iki seçeneğin de sizin durumunuzda uygun olmadığını biliyorum. Böyle bir yol değişkenine eşlemek korkunç bir tasarımdır:

http://www.someexample.com/xsrf/{xsrfKey}

Çünkü doğası gereği, xsrf anahtarını başka bir yola /login, /book-appointmentvb. De geçirmek istersiniz ve güzel URL'nizi karıştırmak istemezsiniz.

Bir nesne alanı olarak ilginç bir şekilde eklemek de uygun değil, çünkü şimdi sunucuya geçirdiğiniz json nesnesinin her birinde alanı eklemeniz gerekiyor

{
  appointmentId : 23,
  name : 'Joe Citizen',
  xsrf : '...'
}

Kesinlikle, sunucu tarafı sınıfınıza etki alanı nesnesiyle doğrudan anlamsal bir ilişkisi olmayan başka bir alan eklemek istemezsiniz.

Bence xsrf anahtarınızı iletmenin en iyi yolu bir HTTP üstbilgisidir. Birçok xsrf koruması sunucu tarafı web çerçevesi kitaplığı bunu desteklemektedir. Örneğin Java Spring'de X-CSRF-TOKENüstbilgiyi kullanarak iletebilirsiniz .

Angular'ın JS nesnesini UI nesnesine mükemmel bir şekilde bağlayabilme özelliği, formun birlikte gönderilmesi ve bunun yerine JSON'un gönderilmesi uygulamasından kurtulabileceğimiz anlamına gelir. JSON, sunucu tarafındaki nesneye kolayca serileştirilebilir ve harita, diziler, iç içe nesneler gibi karmaşık veri yapılarını destekleyebilir.

Diziyi bir form yükünde nasıl gönderiyorsunuz? Belki şöyle:

shopLocation=downtown&daysOpen=Monday&daysOpen=Tuesday&daysOpen=Wednesday

veya bu:

shopLocation=downtwon&daysOpen=Monday,Tuesday,Wednesday

Her ikisi de kötü tasarım.

Bu benim ihtiyacım için yapıyorum, nerede form veri olarak API veri giriş gerekiyor ve Javascript Nesne (userData) otomatik olarak URL kodlanmış verilere dönüştürülüyor

        var deferred = $q.defer();
        $http({
            method: 'POST',
            url: apiserver + '/authenticate',
            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: userData
        }).success(function (response) {
            //logics
            deferred.resolve(response);
        }).error(function (err, status) {
           deferred.reject(err);
        });

Kullanıcı verilerim bu şekilde

var userData = {
                grant_type: 'password',
                username: loginData.userName,
                password: loginData.password
            }

Değiştirmeniz gereken tek şey, $ http nesnenizi oluştururken "data" yerine "params" özelliğini kullanmaktır:

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

Yukarıdaki örnekte istemciler [i] sadece JSON nesnesidir (hiçbir şekilde serileştirilmemiş). "Data" yerine "params" kullanırsanız açısal $ httpParamSerializer kullanarak sizin için serileştirir: https://docs.angularjs.org/api/ng/service/ $ httpParamSerializer

AngularJS $httphizmetini kullanın ve postyöntemini veya yapılandırma $httpişlevini kullanın.