AngularJS transfiere datos a la solicitud $ http.get


577

Tengo una función que hace una solicitud HTTP POST. El código se especifica a continuación. Esto funciona bien

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

Tengo otra función para http GET y quiero enviar datos a esa solicitud. Pero no tengo esa opción en get.

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

La sintaxis para http.getes

get (url, config)

Respuestas:


942

Una solicitud HTTP GET no puede contener datos que se publicarán en el servidor. Sin embargo, puede agregar una cadena de consulta a la solicitud.

angular.http proporciona una opción para que se llame params.

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

Ver: http://docs.angularjs.org/api/ng.$http#get y https://docs.angularjs.org/api/ng/service/$http#usage (muestra el paramsparámetro)


17
esto devolverá una promesa
Connor Leech

1
El código con la promesa: $ http ({método: 'GET', url: '/ someUrl'}). success (function (data, status, headers, config) {// esta devolución de llamada se llamará asincrónicamente // cuando la respuesta esté disponible}). error (función (datos, estado, encabezados, configuración) {// se llama de forma asíncrona si se produce un error // o el servidor devuelve la respuesta con un estado de error.});
Ehud Grand

130
Angular también proporciona la funcionalidad en el $http.get(url.details_path, {params: {user_id: user.id}}).
enpenax

15
Hubiera sido bueno mantener la clave de objeto consistente entre verbos HTTP ... tener datos para POST y params para GET es contradictorio.
Hubert Perron

77
@HubertPerron En realidad, no es contraintuitivo ya que estas son cosas diferentes: DATA puede representar un objeto / modelo, incluso anidado, y se convierte en parte del encabezado POST ... PARAMS representa lo que puede agregar a la URL GET, donde cada propiedad representa un parte de la cadena de consulta en la url. Es bueno que tengan nombres diferentes porque te hace consciente del hecho de que estás haciendo algo diferente.
Jos

520

Usted puede pasar params directamente a $http.get()la siguiente fina obras

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

2
Esto funciona pero el objeto params se está convirtiendo en String. ¿Como retengo el objeto original?
wdphd

13
@wdphd Es inherente a HTTP que se codifique en una cadena de consulta
Uli Köhler

1
@Uli Köhler: Sí, me perdí esto. Estaba pensando en la línea del enrutador UI donde puede especificar el tipo de datos de parámetros. Se corrigió esto con un análisis simple en el backend.
wdphd

2
Esta es la solución correcta si desea agregar parámetros GET a la URL dada y funciona perfectamente bien.
enpenax


43

A partir de AngularJS v1.4.8 , puede usar get(url, config) lo siguiente:

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
Pero estos datos aún no están en un cuerpo de solicitud.
naXa

@naXa GET debería ser parámetros de url solo por convención, por lo que muchos marcos no le permitirán aplicar las mejores prácticas, incluso si técnicamente podría funcionar y podría tener sentido.
Christophe Roussy

1
¡Ojalá la documentación de AngularJS pudiera haber proporcionado este sencillo ejemplo!
Norbert Norbertson

@Arpit Aggarwal, ¿sería tan amable de echar un vistazo a mi pregunta similar con el servidor web golang y vue.js? stackoverflow.com/questions/61520048/…
user2315094

33

Solución para aquellos que estén interesados ​​en enviar parámetros y encabezados en la solicitud GET

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

El ejemplo de servicio completo se verá así

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

});

¿Cómo se usarían los datos de respuesta en un controlador? Gracias.
Floris

3

Incluso puede simplemente agregar los parámetros al final de la url:

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

Emparejado con script.php:

<? var_dump($_GET); ?>

Resultando en la siguiente alerta de JavaScript:

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

2
¿$ http escapa?
Michael Cole

2
Esto también funciona, pero el problema con esto es que cuando tiene varios parámetros, se vuelve difícil agregarlos al final de la url y, si cambia el nombre de una variable, tiene que venir y cambiarlo también en la url.
user3718908

Lo sé. Fue más una demostración, demostrando que incluso puedes hacerlo de la manera regular , no necesariamente lo recomiendo. (Donde 'forma regular' significa cómo probablemente lo has hecho durante años con php)
Jeffrey Roosendaal

2

Aquí hay un ejemplo completo de una solicitud HTTP GET con parámetros que utilizan angular.js en ASP.NET MVC:

CONTROLADOR:

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

VER:

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

En mi humilde opinión, la sintaxis paramses menos propensa a errores que una url concat 'manual'
Christophe Roussy

1

Para enviar obtener una solicitud con el parámetro que uso

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

Con esto, puede usar su propia cadena de URL

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.