Angular表单提交成功时如何打开弹窗

Question

Angular表单提交成功时如何打开弹窗

javascriptjqueryangularjsform-submitpopupwindow

4

我有一个页面，通过angular的$http.post()方法将数据发布到一个ASP.NET MVC页面，当调用完成后，我需要提交一个表单。

基本上我要做以下操作：

<html ng-app>
<body data-ng-controller="testController">
    <form id="Checkpay" name="Checkpay" style="margin: 0" method="post" action="https://www.sandbox.paypal.com/cgi-bin/webscr" target="_blank" class="ng-pristine ng-valid">
        <input type="hidden" name="quantita" id="qtytext" value="0">
        <input type="hidden" name="cmd" value="_xclick">
        <input type="hidden" name="item_name" value="Le Spose di Nika">
        <input type="hidden" name="business" value="TEST@TEST.it">
        <input type="hidden" name="currency_code" value="EUR">
        <input type="hidden" name="cancel_return" id="cancel_return" value="">
        <input type="hidden" name="return" id="return" value="">
        <input type="hidden" name="no_shipping" value="1">

        <input type="hidden" id="H_amount" name="amount" value="719.80">
        <input type="hidden" id="H_first_name" name="first_name">
        <input type="hidden" id="H_address1" name="address1">
        <input type="hidden" id="H_city" name="city">
        <input type="hidden" id="H_state" name="state">
        <input type="hidden" id="H_zip" name="zip">
        <input type="hidden" id="H_email" name="email">
        <input type="hidden" id="Country" name="country">
        <input type="hidden" id="charset" name="charset" value="utf8">
        <input type="hidden" id="rm" name="rm" value="2">
        <input type="hidden" id="notify_url" name="notify_url" value="">

        <input id="Submit1" type="submit" value="submit_post" />
    </form>
    <input id="Submit2" type="button" data-ng-click='pay()' value="js_post" />

</body>



</html>

<script src="http://localhost:27433/Scripts/jquery-1.7.1.min.js"></script>
<script src="http://localhost:27433/Scripts/jquery-ui-1.8.20.min.js"></script>
<script src="http://localhost:27433/Scripts/angular.js"></script>
<script>

    function test() {

    }

    function testController($scope, $http) {
        var URL = "http://backend.MYSITE.com/";

        $scope.payTest = function () {


            var PAYPAL_URL_RELEASE = "https://www.paypal.com/cgi-bin/webscr";
            var PAYPAL_URL_SANDBOX = "https://www.sandbox.paypal.com/cgi-bin/webscr";

            $('#cancel_return').val(URL + '/ErrorPay');
            $('#return').val(URL + '/Success');
            $('#notify_url').val(URL + '/PayPalReceiverIPN.ashx?idOrder=');
            document.forms["Checkpay"].action = PAYPAL_URL_RELEASE;
            document.forms["Checkpay"].submit();

            console.log('paytest is executed!');
        }

        $scope.pay = function () {

            ////$.post(  URL + "/Order/Create", JSON.stringify({ newOrder: 1 }))
            ////    .success(function (datdata, status, headers, configa) {
            ////        console.log(' $.post success');
            ////        $scope.payTest();
            ////    }).error(function (data, status, headers, config) {
            ////        console.log(' $.post failure');
            ////    });


            $http.post(
               URL + "/Order/Create", JSON.stringify({ newOrder: 1 })
                 ).success(function (datdata, status, headers, configa) {
                     console.log('http success');
                     $scope.payTest();
                 }).error(function (data, status, headers, config) {
                     console.log('http failure');
                 });
        }
    }
</script>

当我执行 document.forms["Checkpay"].submit() 时，我期望能够重定向到我的表单属性中的页面，但实际上我得到了一个弹出窗口。

我尝试将 payTest() 函数放在 "success" 外面，它可以正常工作，因此我认为问题在于 $http (或 ajax) 对 "success" 委托的处理方式。

问题是：是否有任何方法在 $http.post(....) 完成调用时重定向页面？

谢谢。

- Michele Dibenedetto

2个回答

0

好的，问题的答案和解释在这里在新窗口中打开页面而不被拦截

问题：当我执行form.submit()时，我会得到一个弹出窗口而不是在浏览器中获得一个新标签页

原因：我已经将提交操作放在ajax调用的成功委托中，这意味着用户没有显式地开始提交，因此浏览器会响应一个弹出窗口并且如果BLOCK IS ON则会阻止弹出窗口。

解决方法：我们可以通过两种方式解决这个问题 1）设置target ="_self"，但我们将在父页面中获取提交的响应 2）在ajax调用中使用同步标志。请注意，似乎angular $http使用硬编码标志进行异步请求。

谢谢所有的答案。

- Michele Dibenedetto

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michiel · Accepted Answer

你的payTest函数是否被执行了？

我会这样做：

function testController($scope, $http) {

     $scope.pay = function () {
        $http({
             method: 'POST',
             url: 'http://backend.mysite.com/Order/Create',
             data: JSON.stringify({ $scope.newOrder: 1 })
        })
        ['success'](function (data, status, headers, config) {
            console.log('http success');
            $scope.payTest();
        })
        ['error'](function (data, status, headers, config) {
             console.log('http failure');
        });
    };

    $scope.payTest = function() {

         console.log('paytest is executed!');
        // all your stuff

    }; 

}

更新：我更改了$http调用的语法，改为我经常使用的方式。