Angularjs 宁静的网络服务调用答案

【问题标题】：Angularjs restful webservice callAngularjs 宁静的网络服务调用
【发布时间】：2015-01-07 17:05:42
【问题描述】：

我想开发一个像这样的 angularui。当我点击提交按钮时，我想调用一个由某人开发的宁静的 web 服务。我的用户名和密码已经在 restful webservice 中进行了设置。当我请求宁静的网络服务时，它将验证我的用户名和密码。如果成功，它将显示我的数据。如果不成功会显示登录失败信息。

案例 1：在那个 html 文件中，我硬编码了我的用户名和密码。在这种情况下，我可以向 RESTful Web 服务发送请求，但我无法从他的机器上得到响应

案例 2：我的问题是将我的值绑定到 url。我在这里发送我的代码。谁能帮我。如何将我的值绑定到 url 以及如何处理响应。

用户名：一个文本框密码：一个文本框提交按钮

我的代码：

<!DOCTYPE html>
<html>
<body>
<form  method="get" ng-submit="submit()">
<div ng-app="formmodule" ng-controller="submitController">
Name :<input type="text" ng-model="uname"></br>
pwd:<input type="password" ng-model="pwd"><br>
<br>


<button ng-click="submit()">submit</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</form>

<script>

var app=angular.module("formmodule",[]);


app.controller("submitController",function submit($scope,$http){
    var uname = $scope.uname;
    var pwd=  $scope.pwd;

     var url = 'http://9.000.000.000:2020/restDemo/rest/user/users?uname=abc&pwd=abc';
            $http.get(url).success(
                function(data)
            {

                         $scope.output = data;

            });



});
</script>
</body>
</html>

【问题讨论】：

那么问题是什么？
我不明白你在问什么。您是在问如何将值从您的 ng-model 传递到您的提交函数？

标签： angularjs

【解决方案1】：

我看到您的ng-submit 不在ng-app 范围内的问题，请尝试将ng-app 放在<body> 或<html> 标签上：

    <!DOCTYPE html>
    <html ng-app="formmodule">
    <body>
       <form  method="get" ng-submit="submit()">
          <div ng-controller="submitController">
              Name :<input type="text" ng-model="uname"></br>
              pwd:<input type="password" ng-model="pwd"><br>
              <br>
              <button ng-click="submit()">submit</button>
         </div>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
      </form>
      .......
     </body>
     </html>

【讨论】：

【解决方案2】：

除了Jai 所说您的 ng-app 位于错误位置之外，您还应该对 HTML 和 JS 进行一些编辑。对于 HTML，您应该执行类似的操作

<form  method="get" ng-submit="submit(uname, pwd)">

在这里，您只需将 ng-models 传递给您的 submit() 函数。从那里，它只是将值插入到您的查询字符串中。

function submit(username, password) {
  var root = 'http://9.000.000.000:2020/restDemo/rest/user/users';
  var queryString = '?uname=' + username + '&pwd=' + password;
  var url = root + queryString;
  ...
}

当您将作用域变量分配给控制器中的局部变量时

var uname = $scope.uname;
var pwd=  $scope.pwd;

您实际上并没有做太多事情，因为您可以在控制器中的任何位置访问作用域变量。上面的提交函数也可以写成：

function submit() {
  var root = 'http://9.000.000.000:2020/restDemo/rest/user/users';
  var queryString = '?uname=' + $scope.uname+ '&pwd=' + $scope.pwd;
  var url = root + queryString;
  ...
}

您不向提交函数传递任何内容。

【讨论】：