The DEMO

Question

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

我是Angular的新手，我打的网络服务是我写的第一个，我需要帮助才能将POST发送到网络服务。

以下是我发送给的ASP.NET Web API的签名，当我使用Postman（UPDATED）发送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成功发送邮件给Web服务，并返回预期结果（webservice向我发送电子邮件）。

不知何故，我知道我的服务搞砸了，但我无法弄清楚它有什么问题。我看过文档和示例，但是他们都让你使用工厂，我正在尝试使用iife方法（再次，我是新手）。任何建议都非常感谢。谢谢！富

Answer 1

我建议编码员首先让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>

Answer 2

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

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

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

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

Answer 3

这是我最终做的事情：

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

感谢您的帮助，但我真的想学习如何使用我开始使用的$资源。

如何在AngularJS中发送带有多个参数的POST

3 个答案:

The DEMO