Futurs chercheurs Internet:
Pour les nouveaux navigateurs (à partir de 2018: Chrome, Firefox, Safari, Opera, Edge et la plupart des navigateurs mobiles, mais pas IE), fetch
est une API standard qui simplifie les appels réseau asynchrones (pour lesquels nous avions besoin de XMLHttpRequest
jQuery$.ajax
).
Voici une forme traditionnelle:
<form id="myFormId" action="/api/process/form" method="post">
<!-- form fields here -->
<button type="submit">SubmitAction</button>
</form>
Si un formulaire comme celui-ci vous est remis (ou que vous l'avez créé car il est sémantique html), vous pouvez envelopper le fetch
code dans un écouteur d'événements comme ci-dessous:
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, si, comme l'affiche originale, vous voulez l'appeler manuellement sans événement de soumission, mettez simplement le fetch
code là-bas et passez une référence à l' form
élément au lieu d'utiliserevent.target
.)
Documents:
Récupérer:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Autre:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript
Cette page en 2018 ne mentionne pas (encore) fetch. Mais il mentionne que l'astuce target = "myIFrame" est obsolète. Et il a également un exemple de form.addEventListener pour l'événement 'submit'.