Question

我需要向端点提交表单，但由于我无法控制的CORS标头，因此无法使用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）想知道为什么无法提交表单提交事件（什么都没有打印到控制台）

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

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

（2）如何在不使用XHR / AJAX的情况下提交此表单，但仍然会触发回调函数并在提交时做一些事情。

以上内容结合常规的提交按钮即可完成。

请注意，虽然您可以检测到用户提交表单的请求，但由于same-origin policy仍然适用，因此您将无法阅读回复。

Answer 2

您应该能够通过事件监听器完成

var form 
form.addEventListener( 'submit', function(e){
    alert("test")
});

捕获表单提交事件而无需Ajax

2 个答案: