Question

在点击表单send_button后，我尝试使用sendPostAjax()函数发送确认帖子，然后将表单提交给付款提供商。但是在点击之前我得到了在页面加载时执行的sendPostAjax()函数。

我试图将sendPostAjax()函数放在click catch中，但是由于sendPostAjax（）函数未定义，因此无法分配promise。

有任何建议我应该如何解决这个问题？

HTML表格

<form id="payment" method="post" action="https://my-payment-provider.com">
    <input type="hidden" name="charset" value="utf-8">
    // --- additional data here
    <button type="submit" name="submit" id="send_button">PAY</button>
</form>

JAVASCRIPT CODE

<script type = "text/javascript">
    // Get click and call sendPostAjax function
    document.getElementById('send_button').addEventListener('click', function () {
        sendPostAjax();
        return false;
    });

    function sendPostAjax() {
        return $.ajax({
            url: 'confirm.php',
            type: 'POST',
            data: {
                cid: '9999999'
            }
        });
    }

    // function that expects a promise as an argument:
    function sendForm(x) {
        x.success(function () {
            $('#payment').submit;
        });
    }

    // get a promise from sendPostAjax:
    var promise = sendPostAjax();

    // give a promise to other function:
    sendForm(promise); 
</script>

Answer 1

您可以使用jQuery按钮点击处理程序执行此操作，将代码替换为以下内容并尝试：

更新了代码（ajax success之后的表单提交）：

$('#send_button').click(function() {
    var form = $('#payment');
    if (form.attr('confirm') === undefined) {
        $.ajax({
            url: 'confirm.php',
            type: 'POST',
            data: {
                cid: '9999999'
            },
            success: function(data) {
                form.attr('confirm', '1');
                $('#send_button').click();
            }
        });
        return false;
    }

    return true;
});

Answer 2

这应该这样做......在你定义了两个函数之后把它放好

   $('#send_button').click(function() {
    // get a promise from sendPostAjax:
    var promise = sendPostAjax();
    // give a promise to other function:
    sendForm(promise);
    });

如何防止js函数在页面加载时执行

2 个答案: