AngularJS verileri $ http.get isteğine iletiyor


577

Bir http POST isteği yapan bir işlevi var. Kod aşağıda belirtilmiştir. Bu iyi çalışıyor.

 $http({
   url: user.update_path, 
   method: "POST",
   data: {user_id: user.id, draft: true}
 });

Http GET için başka bir işlevim var ve bu isteğe veri göndermek istiyorum. Ama benim bu seçeneğim yok.

 $http({
   url: user.details_path, 
   method: "GET",
   data: {user_id: user.id}
 });

Sözdizimi http.getDİR

get (url, yapılandırma)

Yanıtlar:


942

Bir HTTP GET isteği, sunucuya gönderilecek verileri içeremez. Ancak, isteğe bir sorgu dizesi ekleyebilirsiniz.

angular.http bunun için bir seçenek sunar params.

$http({
    url: user.details_path, 
    method: "GET",
    params: {user_id: user.id}
 });

Bkz. Http://docs.angularjs.org/api/ng.$http#get ve https://docs.angularjs.org/api/ng/service/$http#usage ( paramsparametreyi gösterir )


17
bu bir söz verecek
Connor Leech

1
Söz verilen kod: $ http ({method: 'GET', url: '/ someUrl'}). success (function (data, status, headers, config) {// bu geri arama asenkron olarak çağrılır // yanıt alındığında}). error (işlev (veri, durum, üstbilgiler, yapılandırma) {// bir hata oluşursa eşzamansız olarak çağrılır // veya sunucu bir hata durumuyla yanıt döndürür.});
Ehud Grand

130
Açısal ayrıca $http.get(url.details_path, {params: {user_id: user.id}}).
enpenax

15
Nesne anahtarını HTTP fiiller arasında tutarlı tutmak güzel olurdu ... POST için verilere sahip olmak ve GET için parametreler mantıksızdır.
Hubert Perron

7
@HubertPerron Aslında bunlar mantıksız değildir, çünkü bunlar farklı şeylerdir: DATA, bir nesneyi / modeli temsil edebilir, iç içe bile olabilir ve POST başlığının bir parçası olabilir ... PARAMS, GET URL'sine ekleyebileceğiniz şeyi temsil eder. url'deki sorgu dizesinin bir parçası. Farklı adlandırmalara sahip olmaları iyidir, çünkü farklı bir şey yaptığınızı bilmenizi sağlar.
Jos

520

Sen edebilirsiniz doğrudan params geçmesine $http.get()aşağıdaki eserlerini cezası

$http.get(user.details_path, {
    params: { user_id: user.id }
});

2
Bu çalışır, ancak params nesnesi String'e dönüştürülür. Orijinal nesneyi nasıl saklayabilirim?
wdphd

13
@wdphd HTTP'nin bir sorgu dizesine kodlanacağı doğaldır
Uli Köhler

1
@Uli Köhler: Evet, bunu kaçırdım. Ben params veri türü belirtebilirsiniz UI yönlendirici çizgileri boyunca düşünüyordum. Arka uçta basit bir ayrıştırma ile düzeltildi.
wdphd

2
Verilen URL'ye GET parametreleri eklemek istiyorsanız ve mükemmel bir şekilde çalışıyorsa, bu doğru çözümdür.
enpenax


43

AngularJS v1.4.8'den başlayarak, get(url, config) aşağıdaki gibi kullanabilirsiniz :

var data = {
 user_id:user.id
};

var config = {
 params: data,
 headers : {'Accept' : 'application/json'}
};

$http.get(user.details_path, config).then(function(response) {
   // process response here..
 }, function(response) {
});

1
Ancak bu veriler hala bir talep gövdesinde değil.
naXa

@ naXa GET sadece kurallarla URL parametreleri olmalıdır, bu nedenle birçok çerçeve, teknik olarak işe yarayabilir ve mantıklı olsa bile, en iyi uygulamayı uygulamasına izin vermez.
Christophe Roussy

1
Sadece AngularJS belgeleri bu basit örneği verebilseydi!
Norbert Norbertson

@Arpit Aggarwal, golang web sunucusu ve vue.js ile benzer sorumu incelemekte çok nazik misiniz? stackoverflow.com/questions/61520048/…
user2315094

33

GET isteğinde parametre ve başlık göndermek isteyenlere çözüm

$http.get('https://www.your-website.com/api/users.json', {
        params:  {page: 1, limit: 100, sort: 'name', direction: 'desc'},
        headers: {'Authorization': 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='}
    }
)
.then(function(response) {
    // Request completed successfully
}, function(x) {
    // Request error
});

Eksiksiz hizmet örneği şöyle görünecektir

var mainApp = angular.module("mainApp", []);

mainApp.service('UserService', function($http, $q){

   this.getUsers = function(page = 1, limit = 100, sort = 'id', direction = 'desc') {

        var dfrd = $q.defer();
        $http.get('https://www.your-website.com/api/users.json', 
            {
                params:{page: page, limit: limit, sort: sort, direction: direction},
                headers: {Authorization: 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='}
            }
        )
        .then(function(response) {
            if ( response.data.success == true ) { 

            } else {

            }
        }, function(x) {

            dfrd.reject(true);
        });
        return dfrd.promise;
   }

});

Yanıt verileri bir denetleyicide nasıl kullanılır? Teşekkürler.
Floris

3

Parametreleri URL'nin sonuna bile ekleyebilirsiniz:

$http.get('path/to/script.php?param=hello').success(function(data) {
    alert(data);
});

Script.php ile eşleştirildi:

<? var_dump($_GET); ?>

Aşağıdaki javascript uyarısı sonucu:

array(1) {  
    ["param"]=>  
    string(4) "hello"
}

2
$ http kaçıyor mu?
Michael Cole

2
Bu da işe yarıyor, ancak bununla ilgili sorun, birden fazla parametreniz olduğunda, URL'nin sonuna ekleyerek bir ağrı haline gelmesi ve bir değişken adını değiştirirseniz, gelip URL'de de değiştirmeniz gerekir.
user3718908

Biliyorum. Daha çok bir gösteriydi, bunu düzenli bir şekilde bile yapabileceğinizi gösteriyor, kesinlikle tavsiye etmiyorum. ('Normal yol' muhtemelen php ile yıllarca nasıl yaptığınızı gösterir)
Jeffrey Roosendaal

2

ASP.NET MVC'de angular.js kullanan parametrelerle birlikte HTTP GET isteğinin tam bir örneği:

KONTROL:

public class AngularController : Controller
{
    public JsonResult GetFullName(string name, string surname)
    {
        System.Diagnostics.Debugger.Break();
        return Json(new { fullName = String.Format("{0} {1}",name,surname) }, JsonRequestBehavior.AllowGet);
    }
}

GÖRÜNÜM:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript">
    var myApp = angular.module("app", []);

    myApp.controller('controller', function ($scope, $http) {

        $scope.GetFullName = function (employee) {

            //The url is as follows - ControllerName/ActionName?name=nameValue&surname=surnameValue

            $http.get("/Angular/GetFullName?name=" + $scope.name + "&surname=" + $scope.surname).
            success(function (data, status, headers, config) {
                alert('Your full name is - ' + data.fullName);
            }).
            error(function (data, status, headers, config) {
                alert("An error occurred during the AJAX request");
            });

        }
    });

</script>

<div ng-app="app" ng-controller="controller">

    <input type="text" ng-model="name" />
    <input type="text" ng-model="surname" />
    <input type="button" ng-click="GetFullName()" value="Get Full Name" />
</div>

IMHO ile sözdizimi params'manuel' url concat'tan daha az hataya açıktır
Christophe Roussy

1

İ parametresi ile alma isteği göndermek için

  $http.get('urlPartOne\\'+parameter+'\\urlPartTwo')

Bu şekilde kendi URL dizenizi kullanabilirsiniz

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.