如何拦截自动提交表单？答案

【问题标题】：How to intercept auto submit form?如何拦截自动提交表单？
【发布时间】：2019-01-17 09:45:40
【问题描述】：

我的问题是我需要将 XML 数据发布到支付网关。

我已经尝试关注PHP Redirect with POST data的答案，但是我需要拦截提交来操作数据。

所以，我尝试了以下方法：

<html>
<form id="myForm" action="<?php echo $url; ?>" method="post">

</form>
<script type="text/javascript">
$(document).ready (function () {
    document.getElementById('myForm').submit();

    $('#myForm').submit(function (e) {
        console.log('A');

        e.preventDefault();

        alert("a");

        $.post("<?php echo $url; ?>", {'data': formxml}, function (data) {
            // callback logic
        });
    });
});
</script>
</html>

但是，它并没有像我预期的那样工作。

当我执行document.getElementById('myForm').submit() 时，我预计$('#myForm').submit 会拦截它，我可以进行数据验证。

我应该如何进行才能达到我的预期效果？

【问题讨论】：

标签： javascript php jquery xml

【解决方案1】：

快速指针 - Javascript 被逐行解释。意思是第一行在第二行之前执行。

在您的情况下，以下行：

document.getElementById('myForm').submit();

之前正在执行：

$('#myForm').submit(function (e) {
    console.log('A');

    e.preventDefault();

    alert("a");

    $.post("<?php echo $url; ?>", {'data': formxml}, function (data) {
        // callback logic
    });
});

从而导致submit() 在您的处理程序有机会绑定到表单之前被触发。

尝试互换它们。以下代码有效：

<html>
<form id="myForm" action="<?php echo $url; ?>" method="post">

</form>
<script type="text/javascript">
$(document).ready (function () {
    $('#myForm').submit(function (e) {
        console.log('A');

        e.preventDefault();

        alert("a");

        $.post("<?php echo $url; ?>", {'data': formxml}, function (data) {
            // callback logic
        });
    });

    $('#myForm').submit();
});
</script>
</html>

如果这不是您所期望的结果，请告诉我。

【讨论】：

这是我所期待的结果。谢谢！

【解决方案2】：

问题是您使用原生 JavaScript 来触发您的提交，而您的事件侦听器是由 jQuery 设置的。改变

document.getElementById('myForm').submit();

到

$('#myForm').submit();

您应该会看到预期的结果。

【讨论】：