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)

Gordito chico
fuente

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)

fredrik
fuente
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 }
});
Robar
fuente
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) {
});
Arpit Aggarwal
fuente
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;
   }

});
Subodh Ghulaxe
fuente
¿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"
}
Jeffrey Roosendaal
fuente
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>
Denys Wessels
fuente
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

Moin Khan
fuente