在表单提交之前,与AngularJS同步调用服务器

时间:2014-04-05 22:45:41

标签: javascript angularjs payment-gateway

我正在将我的AngularJS应用程序与支付网关集成,该网关要求提交表单以启动流程以收集用户的信用卡详细信息。

流程如下:

  1. 用户以HTML表单填写信息。
  2. 用户点击提交按钮。
  3. onsubmit JavaScript调用AngularJS控制器函数,该函数通过$ http调用我的服务器并获取一些信息。
  4. 此信息用于填充表单中的隐藏字段。
  5. 表单将提交至支付网关站点,用户在该站点上输入其信用卡详细信息。
  6. 为了使这个过程起作用,我需要在我从onsubmit返回true或false之前返回我的服务器,并允许提交表单。

    使用promises($ q)的所有示例最终会导致使用回调的代码。如何通过同步调用实现上述流程,还是有其他方法可以实现我的要求?

    function allowSubmit() {
            var scope = angular.element(document.querySelector( '#bookingForm' )).scope();
    
            try {
                var success = scope.createPayment();//createPayment is a method on my controller I need to synchronously call my backend with
                return success;
            } catch (e) {
            //log/alert
                return false;
            }
    }
    
    
    <form id="bookingForm" name="bookingForm" novalidate action=" https://www.example.com/xyz/process.trans" method="POST" onsubmit="return allowSubmit();" >
    ...
    <button type="submit" class="btn btn-success btn-lg pull-right">Payment</button>
    ...
    </form>
    

1 个答案:

答案 0 :(得分:2)

解决方案看起来是:创建没有操作或方法的表单,然后设置它们并在控制器中从服务器回调提交。

<form id="bookingForm" name="bookingForm" novalidate >
...
<button class="btn btn-success btn-lg pull-right" ng-click="createPaymentAndNavigate(bookingForm.$valid)">Payment</button>
...
</form>

//In server callback on controller
var bookingForm = document.getElementById('bookingForm')
bookingForm.action = "https://www.example.com/xyz/process.trans";
bookingForm.method = "POST";
bookingForm.submit();