httpparams - import http from ''@ angular http

¿Cómo pasar parámetros a $ http en angularjs?

Question

Supongamos que tengo dos cuadros de entrada con el modelo ng correspondiente como fname y lname. Si llamo a http request como:

$http({method:''GET'', url:''/search'', params:{fname: fname, lname: lname}})

¿Llamará a la url?

/search?fname=fname&lname=lname

El error que estoy obteniendo en el backend (python) es:

cannot concatenate str and nontype objects.

¿Estos parámetros no se envían como cadenas? Si no, ¿cómo moverse con esto?

Answer 1

Aquí hay un paso simple para pasar valores de un proveedor de ruta

//Route Provider
$routeProvider.when("/page/:val1/:val2/:val3",{controller:pageCTRL, templateUrl: ''pages.html''});


//Controller
$http.get( ''page.php?val1=''+$routeParams.val1 +''&val2=''+$routeParams.val2 +''&val3=''+$routeParams.val3 , { cache: true})
        .then(function(res){
            //....
        })

Answer 2

Así es como lo haces:

$http.get("/url/to/resource/", {params:{"param1": val1, "param2": val2}})
    .then(function (response) { /* */ })...

Angular se encarga de codificar los parámetros .

La respuesta de Maxim Shoustin no funciona ( {method:''GET'', url:''/search'', jsonData} no es un literal válido de JavaScript) y la respuesta de JeyTheva, aunque simple, es peligrosa ya que permite XSS (no se escapan los valores inseguros los concatena)

Answer 3

Construye URL ''/search'' como cadena. Me gusta

"/search?fname="+fname"+"&lname="+lname

En realidad no usé

 `$http({method:''GET'', url:''/search'', params:{fname: fname, lname: lname}})` 

pero estoy seguro de que "params" debería ser JSON.stringify como para POST

var jsonData = JSON.stringify(
    {
        fname: fname,
        lname: lname 
    }
);

Después:

$http({
  method:''GET'',
  url:''/search'',
  params: jsonData
});

Answer 4

Podemos usar datos de entrada para pasarlo como un parámetro en el archivo HTML w use ng-model para vincular el valor del campo de entrada.

<input type="text" placeholder="Enter your Email" ng-model="email" required>

<input type="text" placeholder="Enter your password " ng-model="password" required> 

y en el archivo js use $ scope para acceder a esta información:

$scope.email="";
$scope.password="";

La función del controlador será algo así:

 var app = angular.module(''myApp'', []);

    app.controller(''assignController'', function($scope, $http) {
      $scope.email="";
      $scope.password="";

      $http({
        method: "POST",
        url: "http://localhost:3000/users/sign_in",
        params: {email: $scope.email, password: $scope.password}

      }).then(function mySuccess(response) {
          // a string, or an object, carrying the response from the server.
          $scope.myRes = response.data;
          $scope.statuscode = response.status;

        }, function myError(response) {
          $scope.myRes = response.statusText;
      });
    });