Question

我是angularjs的绝对新手，对网络服务也不了解。我的要求是这样的：

我将有一个基本的登录页面（使用html和angularjs设计），这将要求我的凭据（用户名和密码）。在提供一组凭据并单击“提交”按钮时，我的代码需要处理表单数据并将信息传递给Web服务。我只有网络服务的网址和我没有别的。因此，我的主要目标是将用户名和密码发送到Web服务（最好是作为JSON对象）并检查其是否正常工作。到目前为止，我已成功地成功：

1＆GT;点击webservice（我使用$ resource做同样的事情。） 2 - ;将用户名和密码存储为JSON对象。

现在我需要完成两件事：

1＆GT;将此数据作为“POST”发送，最重要的是，2＆gt;将此JSON数据（作为对象或字符串）发送到Web服务。

我绝对无能为力......请修改我的代码来帮助我。

提前致谢。这是我的JS文件：

var app = angular.module('angularjs-starter', ['ngResource']);

app.controller('MainCtrl', function ($scope,$http,$resource) {
$http.defaults.useXDomain = true;

$scope.checkUsername = function(){

var USERNAME = $scope.inputUsername;
var PASSWORD = $scope.inputPassword;

var f = JSON.stringify({USERNAME: USERNAME, PASSWORD: PASSWORD });

var result= JSON.parse(f);

var Something = $resource("/some url/:id", {id: "@id"},
      {
      post:{
          method:"POST",
          isArray:false
           },
      });
  $scope.something = Something.get({id:1});

  $scope.alertMessage = "Web service has been successfully hit!";


};

});

这是我的HTML文件：

<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Authentication</title>

<script src="C:\Users\Rup\Desktop\POC2\js\angular.js"></script>
<script src="C:\Users\Rup\Desktop\POC2\js\angular-resource.js"></script>
<script src="C:\Users\Rup\Desktop\POC2\experiment_2.js"></script>

<link rel="stylesheet" href="style.css">


</head>

<body ng-controller="MainCtrl">
   <h1>Hello</h1>
   <form name="form1" class="form-horizontal">
          <label class="control-label" for="inputUsername">Username</label> <input
                 type="text" id="inputUsername" placeholder="Username"
                 ng-model="inputUsername"> <br /> <label
                 class="control-label" for="inputPassword">Password</label> <input
                 type="password" id="inputPassword" placeholder="Password"
                 ng-model="inputPassword"> <br /> <span class="help-block">{{alertMessage}}</span>
          <br />
          <!--<a class="btn">Sign in</a>-->
          <button ng-click="checkUsername()">Submit</button>
   </form>
</body>

</html>

Answer 1

好消息是，这应该是相当直接的。你有正确的想法，你只需要像你做的那样扩展资源对象＆＃34; post＆＃34;方法，当你调用它时 - 传入你的JSON对象。然后，Angular将自动将传入的JSON对象作为post参数附加。将这个用户资源创建为服务/工厂是一个好主意（我已经阅读过），这样您就可以将其注入控制器以抽象调用服务器。举个例子 - 我所做的就是像这样创建服务（依赖于angular $ resource）：

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

myApp.factory('UserService', ["$resource", 
        function UserService($resource) {
            var UserService = $resource('/rest/user', {}, {
                search: {
                    method: 'POST',
                    url: window.location.origin +'/yourServer/rest/search' //custom url of your service to be called 
                }
            });

            return UserService;
        }
    ])

然后在您的控制器中，您注入要使用的服务，并创建一个方法，然后调用您闪亮的新服务：

myApp.controller("myAppController", ["$scope", "UserService", 
        function myAppCtrl($scope, UserService) {

    $scope.search = function () {
        var params = {
         param1: "searchValue1",
         param2: "searchValue2"
        }
        var response = UserService.search(params);
        response.$promise.then(
            function success() {
                //celebrate!

            }, 
            function fail(err) {
                //comiserate
            }
        );
    }
}

来自对service方法的调用的响应对象是一个promise，您可以附加成功或失败函数，以便在调用成功返回或失败时调用。

如何使用angularjs中的$ resource将JSON对象/字符串（作为“POST”）发送到Web服务

1 个答案: