JQuery olmadan $ http ile urlencoded form verilerini POST nasıl?

AngularJS'de yeniyim ve bir başlangıç ​​için, sadece AngularJS kullanarak yeni bir uygulama geliştirmeyi düşündüm.

$httpBenim Angular App kullanarak sunucu tarafında bir AJAX çağrısı yapmaya çalışıyorum .

Parametreleri göndermek için aşağıdakileri denedim:

$http({
    method: "post",
    url: URL,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: $.param({username: $scope.userName, password: $scope.password})
}).success(function(result){
    console.log(result);
});

Bu çalışıyor, ancak jQuery de kullanıyor $.param. JQuery bağımlılığını kaldırmak için denedim:

data: {username: $scope.userName, password: $scope.password}

ama bu başarısız olmuş gibiydi. Sonra denedim params:

params: {username: $scope.userName, password: $scope.password}

ama bu da başarısız olmuş gibiydi. Sonra denedim JSON.stringify:

data: JSON.stringify({username: $scope.userName, password: $scope.password})

Görevime bu olası cevapları buldum, ancak başarısız oldu. Yanlış bir şey mi yapıyorum? Eminim, AngularJS bu işlevi sağlar, ama nasıl?

Yapmanız gereken, verilerinizi nesneden JSON dizesine değil, url parametrelerine dönüştürmektir.

Ben Nadel'in blogundan .

Varsayılan olarak, $ http hizmeti, verileri JSON olarak serileştirip ardından "application / json" içerik türüyle göndererek giden isteği dönüştürür. Değeri bir FORM postası olarak göndermek istediğimizde, serileştirme algoritmasını değiştirmeli ve verileri "application / x-www-form-urlencoded" içerik türüyle kaydetmeliyiz.

Buradan bir örnek .

$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: {username: $scope.userName, password: $scope.password}
}).then(function () {});

GÜNCELLEME

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

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

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

AngularJS 1.4 ve sonraki sürümlerde, iki hizmet POST istekleri için url kodlama verilerini işleyebilir ve verilerin transformRequestjQuery gibi harici bağımlılıklarla manipüle edilmesi veya kullanılması gereğini ortadan kaldırır :

1. $httpParamSerializerJQLike- jQuery's'den esinlenen bir seri hale getirici .param()( önerilir )

2. $httpParamSerializer - Angular'ın GET istekleri için kullandığı bir serileştirici

Örnek kullanım

$http({
  url: 'some/api/endpoint',
  method: 'POST',
  data: $httpParamSerializerJQLike($scope.appForm.data), // Make sure to inject the service you choose to the controller
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded' // Note the appropriate header
  }
}).then(function(response) { /* do something here */ });

Daha ayrıntılı bir Plunker demosuna bakın

Nasıl $httpParamSerializerJQLikeve $httpParamSerializerfarklı

Genel olarak, karmaşık veri yapıları söz konusu $httpParamSerializerolduğunda $httpParamSerializerJQLikeolduğundan daha az "geleneksel" url kodlama formatı kullanır.

Örneğin (parantez kodlama yüzdesini yok saymak):

• Bir diziyi kodlama

{sites:['google', 'Facebook']} // Object with array property

sites[]=google&sites[]=facebook // Result with $httpParamSerializerJQLike

sites=google&sites=facebook // Result with $httpParamSerializer

• Bir nesneyi kodlama

{address: {city: 'LA', country: 'USA'}} // Object with object property

address[city]=LA&address[country]=USA // Result with $httpParamSerializerJQLike

address={"city": "LA", country: "USA"} // Result with $httpParamSerializer

Bunların hepsi aşırıya kaçıyor (ya da çalışmıyor) ... sadece bunu yap:

$http.post(loginUrl, `username=${ encodeURIComponent(username) }` +
                     `&password=${ encodeURIComponent(password) }` +
                     '&grant_type=password'
).success(function (data) {

Sorun JSON dize biçimidir, Verilerde basit bir URL dizesi kullanabilirsiniz:

$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: 'username='+$scope.userName+'&password='+$scope.password
}).success(function () {});

İşte olması gereken yol (ve lütfen arka uç değişiklikleri yok ... kesinlikle değil ... eğer ön yığının desteklemiyorsa application/x-www-form-urlencoded, atmak ... umarım AngularJS yapar!

$http({
     method: 'POST',
     url: 'api_endpoint',
     headers: {'Content-Type': 'application/x-www-form-urlencoded'},
     data: 'username='+$scope.username+'&password='+$scope.password
 }).then(function(response) {
    // on success
 }, function(response) {
    // on error
 });

AngularJS 1.5 ile cazibe gibi çalışır

İnsanlar, size bazı tavsiyelerde bulunalım:

• (geri çekildikleri için) .then(success, error)uğraşırken $http, unutur .sucessve .errorgeri çağırırken sözler kullanın

• Angularjs siteden burada " Artık geri arama parametre değeri gitmesi gereken yere belirtmek için yer tutucu olarak JSON_CALLBACK dizesi kullanabilirsiniz. "

Veri modeliniz yalnızca bir kullanıcı adı ve paroladan daha karmaşıksa, bunu yine de yapabilirsiniz (yukarıda önerildiği gibi)

$http({
     method: 'POST',
     url: 'api_endpoint',
     headers: {'Content-Type': 'application/x-www-form-urlencoded'},
     data: json_formatted_data,
     transformRequest: function(data, headers) {
          return transform_json_to_urlcoded(data); // iterate over fields and chain key=value separated with &, using encodeURIComponent javascript function
     }
}).then(function(response) {
  // on succes
}, function(response) {
  // on error
});

İçin belge buradaencodeURIComponent bulunabilir

Bir formsa üstbilgiyi şu şekilde değiştirmeyi deneyin:

headers[ "Content-type" ] = "application/x-www-form-urlencoded; charset=utf-8";

ve bir form ve basit bir json değilse bu başlığı deneyin:

headers[ "Content-type" ] = "application/json";

$http({

    method: "POST",
    url: "/server.php",
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    data: "name='Олег'&age='28'",


}).success(function(data, status) {
    console.log(data);
    console.log(status);
});

Gönderen $ http docs bu çalışması gerekir ..

  $http.post(url, data,{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
    .success(function(response) {
         // your code...
     });

düz javascript nesnesi yayınlamanız gerekiyor, başka bir şey yok

           var request = $http({
                method: "post",
                url: "process.cfm",
                transformRequest: transformRequestAsFormPost,
                data: { id: 4, name: "Kim" }
            });

            request.success(
                function( data ) {
                    $scope.localData = data;
                }
            );

arka uç olarak php varsa o zaman biraz daha değişiklik yapmak gerekecek .. php sunucu tarafı düzeltmek için bu bağlantıyı kontrol

Geç cevap olsa da, açısal UrlSearchParams'ın benim için çok iyi çalıştığını buldum, parametrelerin kodlanmasına da dikkat ediyor.

let params = new URLSearchParams();
params.set("abc", "def");

let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded'});
let options = new RequestOptions({ headers: headers, withCredentials: true });
this.http
.post(UrlUtil.getOptionSubmitUrl(parentSubcatId), params, options)
.catch();

Bu benim için çalıştı. Ön uç için açısal, arka uç için laravel php kullanıyorum. Projemde, açısal web json verilerini laravel arka ucuna gönderir.

Bu benim açısal kontrol cihazım.

var angularJsApp= angular.module('angularJsApp',[]);
angularJsApp.controller('MainCtrl', function ($scope ,$http) {

    $scope.userName ="Victoria";
    $scope.password ="password"


       $http({
            method :'POST',
            url:'http://api.mywebsite.com.localhost/httpTest?callback=JSON_CALLBACK',
            data: { username :  $scope.userName , password: $scope.password},
            headers: {'Content-Type': 'application/json'}
        }).success(function (data, status, headers, config) {
            console.log('status',status);
            console.log('data',status);
            console.log('headers',status);
        });

});

Bu benim php arka uç laravel denetleyicisidir.

public function httpTest(){
        if (Input::has('username')) {
            $user =Input::all();
            return  Response::json($user)->setCallback(Input::get('callback'));
        }
    }

Bu benim sıradan yönlendirme

Route::post('httpTest','HttpTestController@httpTest');

Tarayıcıda sonuç

durum 200
verileri JSON_CALLBACK ({"kullanıcı adı": "Victoria", "şifre": "şifre", "geri arama": "JSON_CALLBACK"}); httpTesting.js: 18 başlık işlevi (c) {a || (a = sc (b)); c? a [K (c)] || null: a} döndür

Postacı adı verilen krom uzantısı var. Arka uç URL'nizin çalışıp çalışmadığını test etmek için kullanabilirsiniz. https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en

umarım cevabım size yardımcı olacaktır.