【问题标题】：How to send POST with multiple parameters in AngularJS如何在AngularJS中发送带有多个参数的POST
【发布时间】：2017-12-26 22:03:20
【问题描述】：

编辑：我已经更新了 Web 服务，如下所示。现在我可以使用 Postman 发送一个 JSON 对象并获得预期的结果（网络服务成功向我发送了一封电子邮件）。

我是 Angular 的新手，我正在使用的 Web 服务是我编写的第一个 Web 服务，我需要帮助将 POST 发送到 Web 服务。

这是我发送到的 ASP.NET Web API 的签名，当我使用 Postman（更新）发送 POST 时它可以正常工作：

[HttpPost]
    public bool Post(Email msg)
    {
        return SendEmailMessage(msg);
    }

这是我在 AngularJS 中的控制器（使用 vm.msg 更新）：

(function () {
angular
    .module('app')
    .controller('About', ['dataService', About]);

function About(dataService) {
    var vm = this;
    //(bunch of stuff removed for brevity)      
    vm.sendMail = function (form) {
        vm.submitted = true;
        vm.mailResult = dataService.sendMail.send(vm.msg);
        if (vm.mailResult) {
            vm.cancel();
        };
    };
    return vm;
}
})();

这是我在 AngularJS 中的服务：

(function () {
'use strict';

angular
    .module('app')
    .service('dataService', ['$resource', dataService]);

function dataService($resource) {
    return {
        sendMail: sendMail
    };

    function sendMail(msg) {
        return $resource('/api/email/:data',
            {},
            {
                send: { method: 'POST', params: { data: msg} }
            });
    };
};})();

这是我用 Postman 发送的 POST，它有效：

mywebservice.com/api/email 带有 JSON 对象的 POST 使用 Postman 成功发送到 Web 服务，并返回预期结果（Web 服务向我发送电子邮件）。

不知何故，我知道我的服务搞砸了，但我不知道它出了什么问题。我查看了文档和示例，但是它们都让您使用工厂，并且我正在尝试使用 iife 方法来做到这一点（同样，我是新手）。任何建议都非常感谢。谢谢！丰富

【问题讨论】：

你为什么使用$resource？使用$http Service 会更简单。
另外，让表单填写消息对象而不是将其拆分为三个模型变量会更简单。
我使用 $resource 是因为我读到的几件事表明它更容易。如果没有，怎么办？另外，我尝试发送一个对象，但无法弄清楚如何在服务中接收它，所以我回到了单个参数。如果有更简单的方法，请将其作为答案发布 - 我很感激这些提示。

标签： angularjs asp.net-web-api

【解决方案1】：

这是我最终做的：

Web 服务如上面所编辑，允许将 JSON 对象发送给它。控制器中的代码如下：

vm.sendMail = function (form) {
        vm.submitted = true;
        vm.msg.message = vm.msg.message.replace(/(\r\n|\n|\r|\n\r)/gm, '<br/>');

        var sendMessage = new emailService();
        sendMessage.$save(vm.msg)
            .then(function () {
                vm.sendSuccess = true;
                vm.sendFailed = false;
                vm.cancel();
            })
            .catch(function() {
                vm.sendSuccess = false;
                vm.sendFailed = true;
                vm.submitted = false;
            });
    };

服务中的代码如下：

(function() {
'use strict';

angular
    .module('app')
    .service('emailService', ['$resource', emailService]);

function emailService($resource) {
    return $resource('/api/email');
};
})();

感谢您的帮助，但我真的很想了解如何使用我一开始使用的 $resource 来做到这一点。

【讨论】：

【解决方案2】：

我建议编码人员首先让 API 与 $http service 一起使用，然后再将其打包到工厂中或使用 REST api 库，例如 ngResource。

发布到接收 URL 参数中数据的 API：

    var config = { params: vm.msg };
    $http.post(url, vm.msg, config)
      .then (function (response) {
        vm.result = "SUCCESS";
        vm.data = response.data;
        console.log(vm.data);
    }).catch(function (error){
        vm.result = "ERROR: "+error.status;
        console.log(error);
    })

上面的示例在 POST 正文和 URL 参数中发布数据。表单填写一个消息对象，而不是将其拆分为三个模型变量。

The DEMO

angular.module("app",[])
.controller("ctrl", function($scope, $http){
  var vm = $scope;
  vm.msg = {
    name: "J. Doe",
    email: "j@doe.com",
    message: "Hi there"
  };
  var url = "//httpbin.org/post";
  
  vm.submit = function() {
    var config = { params: vm.msg };
    $http.post(url, vm.msg, config)
      .then (function (response) {
        vm.result = "SUCCESS";
        vm.data = response.data;
        console.log(vm.data);
    }).catch(function (error){
        vm.result = "ERROR: "+error.status;
        console.log(error);
    })
  }
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl">
    <form ng-submit="submit()">
      Name&nbsp;<input ng-model="msg.name" />
      <br>Email&nbsp;<input ng-model="msg.email" />
      <br>Message
      <br><textarea ng-model="msg.message">
          </textarea>
      <br><button type="submit">Submit</button>
    </form>
    <hr>
    <p>{{result}}</p>
    <p>{{data.url | json}}</p>
    <p>{{data.json | json}}</p>
  </body>

【讨论】：

好的...我想我明白这里发生了什么，但我看不到如何让我的网络服务接受一个对象而不是三个参数。我尝试在控制器中创建一个接收对象的方法，尝试接收电子邮件（Web 服务中使用的模型），但我只得到一个错误。 javascript 对象如何转换为 .Net 对象？
那是另一个问题。看POST JSON with MVC 4 API Controller。

【解决方案3】：

如果您想将参数作为查询字符串发送，那么您不需要声明参数的名称。

return $resource('/api/email',{},
        {
            send: { method: 'POST'}
        });

但是如果你想将参数作为一个rest模板发送，那么你应该声明参数名称。

 return $resource('/api/email/:name/:address/:message',{},
        {
            send: { method: 'POST', params:{name:@name,address:@address,message:@message} }
        });

并在控制器中像这样调用服务

 dataService.sendMail.send({name:vm.name, email:vm.email, message:vm.message});

【讨论】：

@ 符号在哪里出现？我在我看过的其他代码示例中看到了它，但还没有看到它的用途的解释。
当我用传入的参数名称替换您的 @ 表示法时，我得到一个“TypeError：对象不支持属性或方法‘发送’。当我按照您输入的方式执行所有操作时, 我在 dataService.js (19, 45) 处得到一个无效字符 - @name 和 $injector:modulerr 之后的逗号，由于未知的提供者 dataServiceProvider 无法启动模块应用程序。此外，所有 @ 符号都带有下划线ide（带有 ReSharper 的 VS2017）。
请参阅$resourcedocs.angularjs.org/api/ngResource/service/$resource的anhular API
@RichHopkins 你看到this
是的，我做到了。谢谢。