web-dev-qa-db-fra.com

Comment passer les paramètres à $ http dans angularjs?

Supposons que j'ai deux zones de saisie avec le modèle ng correspondant comme fname et lname. Si j'appelle http requête en tant que:

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

va-t-il appeler l'URL:

/search?fname=fname&lname=lname

L'erreur que je reçois au backend (python) est la suivante:

cannot concatenate str and nontype objects.

Ces paramètres ne sont-ils pas envoyés sous forme de chaînes? Sinon, comment se débrouiller avec ça?

40
Sangram

Voici comment vous le faites:

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

Angular se charge de coder les paramètres .

La réponse de Maxim Shoustin ne fonctionne pas ({method:'GET', url:'/search', jsonData} n'est pas un littéral JavaScript valide) et la réponse de JeyTheva, bien que simple, est dangereuse car elle autorise XSS (les valeurs non sûres ne sont pas échappées lorsque vous les concaténer).

73
sleblanc

Construire l'URL '/search' sous forme de chaîne. Comme

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

En fait je n'ai pas utilisé

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

mais je suis sûr que "params" devrait être JSON.stringify comme pour POST

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

Après:

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

Voici un calcul simple pour transmettre les valeurs d'un fournisseur d'itinéraire 

//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){
            //....
        })

Nous pouvons utiliser les données d'entrée pour les transmettre en tant que paramètre dans le fichier HTML. En utilisant ng-model pour lier la valeur du champ d'entrée.

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

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

et dans le fichier js, utilisez $ scope pour accéder à ces données:

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

Fonction du contrôleur sera quelque chose comme ça:

 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;
      });
    });
0
Abdallah Okasha