Futuros pesquisadores da Internet:
Para novos navegadores (a partir de 2018: Chrome, Firefox, Safari, Opera, Edge e a maioria dos navegadores móveis, mas não o IE), fetch
é uma API padrão que simplifica as chamadas de rede assíncronas (para as quais costumávamos precisar XMLHttpRequest
ou jQuery $.ajax
).
Aqui está uma forma tradicional:
<form id="myFormId" action="/api/process/form" method="post">
<!-- form fields here -->
<button type="submit">SubmitAction</button>
</form>
Se um formulário como o acima foi entregue a você (ou você o criou por ser um html semântico), você pode agrupar o fetch
código em um ouvinte de evento, como abaixo:
document.forms['myFormId'].addEventListener('submit', (event) => {
event.preventDefault();
// TODO do something here to show user that form is being submitted
fetch(event.target.action, {
method: 'POST',
body: new URLSearchParams(new FormData(event.target)) // event.target is the form
}).then((resp) => {
return resp.json(); // or resp.text() or whatever the server sends
}).then((body) => {
// TODO handle body
}).catch((error) => {
// TODO handle error
});
});
(Ou, como no pôster original que você deseja chamá-lo manualmente sem um evento de envio, basta colocar o fetch
código lá e passar uma referência ao form
elemento em vez de usá-lo event.target
.)
Documentos:
Buscar:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Outro:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript
Essa página em 2018 não menciona a busca (ainda). Mas menciona que o truque target = "myIFrame" está obsoleto. E também tem um exemplo de form.addEventListener para o evento 'submit'.