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

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

json web-services angularjs

如何使用angularjs中的$resource将JSON对象/字符串（作为'；POST'；）发送到Web服务,json,web-services,angularjs,Json,Web Services,Angularjs,我是angularjs的新手，对web服务也一无所知。我的要求是这样的：我将有一个基本的登录页面（使用html和angularjs设计），它将询问我的凭证（用户名和密码）。在提供一组凭据并单击“提交”按钮后，我的代码需要处理表单数据并将信息传递给Web服务。我只带了Web服务的url，其他什么都没有。因此，我的主要目标是将用户名和密码发送到Web服务（最好是作为JSON对象），并检查其工作是否正常。到目前为止，我成功地做到了： 1> 点击Web服务（我已经使用$resource做了同样的事

我是angularjs的新手，对web服务也一无所知。我的要求是这样的：

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

1> 点击Web服务（我已经使用$resource做了同样的事情。） 2> 将用户名和密码存储为JSON对象

现在我需要完成两件事：

1> 将此数据作为“POST”发送，最重要的是，2>将此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>


认证
你好
用户名
密码
{{alertMessage}


提交

好消息是这应该是相当直接的。您的想法是正确的，您只需要像使用“post”方法一样扩展资源对象，并且在调用它时传入JSON对象。Angular然后将传入的JSON对象作为post参数自动附加。这是一个好主意（我已经读过），将此用户资源创建为服务/工厂，这样您就可以将其注入控制器中，以抽象对服务器的调用。例如，我所做的事情就是创建这样的服务（依赖angular$资源）：

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

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

对服务方法的调用的响应对象是一个promise，当调用成功返回或失败时，您可以附加要调用的success或fail函数

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