3

在将用户发布到支付提供商之前，我想运行一个角度函数。支付提供商的表单如下所示：

<form action="UrlToPaymentProvider" method="POST">
   <input type="hidden" name="formKeys />
   <input type="submit" />
</form>

AngularJS 控制器文件：

$scope.memberRedirectedToPaymentProvider = function () {
     console.log("Member is redirected");
     $http.post("/my url", {
         orderKey: $scope.model.Order.Key,
     });
}

我可以看到我的日志输出了值，但帖子没有。如果我action="UrlToPaymentProvider" method="POST"在表单元素上删除，我已经调试并且帖子有效。

4

3 回答 3

4

我了解您尝试在表单提交时混合同步和异步调用。您可以将同步表单发送与 AngularJS 函数混合在一起，就像在这个演示小提琴中一样。一旦你的 XHR 请求完成，默认的表单提交就会被阻止，e.preventDefault();表单将由原生 JavaScript提交document.getElementById("myForm").submit();。

看法

<div ng-controller="MyCtrl">
  <form method="post" ng-submit="send($event)" action="someURL" id="myForm">
    <input type="hidden" name="formKeys">
    <input type="submit">
  </form>
</div>

AngularJS 应用程序

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

myApp.controller('MyCtrl', function ($scope, $http) {

    $scope.send = function (e) {

      //prevent default form send
      e.preventDefault();

      //example request
      $http({
        method: 'GET',
        url: 'https://jsonplaceholder.typicode.com/posts'
      }).then(function(response) {
         //manually submit your form once your async. logic has been procceded.
         document.getElementById("myForm").submit();
      });
    };
});
于 2017-03-02T09:22:04.100 回答
0

你可以尝试这样的事情：

<form ng-submit="send()" >
    <input />
    ....
</form>

在控制器中：

$scope.send = function() {

     //your custom function here

     $http.post('urlToPost', $scope.myProfile)
     .success(function(data, status, headers, config) {
        console.log("getting success status")
     })
     .error(function(data, status, headers, config) {
        console.log("getting error status")
     });
 }
于 2017-03-02T09:06:26.243 回答
0

除了使用表单action，您还可以使用ng-submit.

<form name="myForm" ng-submit="memberRedirectedToPaymentProvider()">
<input type="hidden" name="formKeys />
...

<input type="submit" />
</form>

要进行 AJAX POST 调用，您可以使用带有方法的angular $http服务。post

$scope.memberRedirectedToPaymentProvider = function () {
     console.log("Member is redirected");
     var url = "/myurl";
     var data = {
         orderKey: $scope.model.Order.Key
     };
     $http.post("/myurl", data).success(function(data, status) {
            $scope.response = data;
     })
}
于 2017-03-02T09:06:31.780 回答