javascript - 无需 Ajax 即可捕获表单提交事件

Question

我需要向端点提交表单，但由于我无法控制 CORS header ，因此无法使用 AJAX 执行此操作。

我目前正在通过渲染隐藏的 iframe 并将提交作为目标来执行此操作。但我仍然无法捕获该事件(我猜测是因为它在 iframe 的范围内？)

HTML

<form id="my-form" method="post" action="www.example.com/submission-endpoint" target="hiddenframe" >
    // ... form fields ...
</form>
<iframe width="0" height="0" border="0" name="hiddenframe" style="display:none"></iframe>

JS

document.getElementById("my-form").submit(function(e){

    console.log(e); // does not print to console
});

我对其他实现持开放态度，但我(1)想知道为什么表单提交事件不可访问(没有任何内容打印到控制台)以及(2)如何提交此表单没有 使用 XHR/AJAX 但仍然会触发回调函数并在提交时执行一些操作。

Answer 1

(1) like to know why the form submit event is not accessible (nothing printed to console)

submit() 方法用于以编程方式触发表单提交。

要监听事件，请使用 addEventListener("submit", your_function);。

(2) how I can submit this form without using XHR/AJAX yet still fire a callback function and do some stuff on submission.

上面的内容与常规的提交按钮相结合就可以完成这项工作。

请注意，虽然您可以检测到用户提交表单的请求，但您将无法将响应读取为 same-origin policy仍然适用。