如何在AngularJS中向$http传递参数？

Question

假设我有两个带有相应 ng-model 的输入框，分别是 fname 和 lname。如果我调用以下 http 请求：

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

它会调用到这个URL吗：

/search?fname=fname&lname=lname

我在后端（Python）遇到的错误是：

cannot concatenate str and nontype objects.

这些参数不是以字符串形式发送的吗？如果不是，该如何解决？

- exAres

Answer 1

这里是如何做的：

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

Angular 会处理参数的编码。

Maxim Shoustin 的回答不可行（{method:'GET', url:'/search', jsonData} 不是有效的 JavaScript 文本），JeyTheva 的回答虽然简单，但容易引起 XSS 攻击（当你把未经转义的值连接在一起时，不安全的值不会被转义）。

- sleblanc

---

我们是否将值放在 .then 中？ - Winnemucca

@stevek，你将一个函数传递给then子句；该函数接受一个参数，即响应本身。 - sleblanc

对我来说，需要将数据包装在“参数”字段中，例如：$http.get( "/url/to/resource/", { params: { parameters: {"param1": val1, "param2": val2} } } ).then(function (response) { /* */ }) - Shiv

而对于PUT和POST，您需要使用另一种方法签名。https://dev59.com/TlwZ5IYBdhLWcg3wVfEC - nickolay.laptev

Answer 2

将URL地址'/search'作为字符串构建。例如：

构建URL字符串：

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

实际上我没有使用

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

但我确定"params"应该像POST一样用JSON.stringify

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

之后：

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

- Maxim Shoustin

Answer 3

这里有一个简单的方法，可以从路由提供程序中传递值。

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

- Jeyarathnem Jeyachanthuru

Answer 4

我们可以使用输入数据将其作为参数传递到HTML文件中，使用ng-model绑定输入字段的值。

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

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

在js文件中，我们使用$scope来访问这些数据：

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

控制器函数将类似于以下内容：

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

- Abdallah Okasha