Soumettre le formulaire Ajax
La description
Framework7 vous permet d'envoyer automatiquement des données en utilisant Ajax en utilisant les deux méthodes suivantes -
Lorsque l'utilisateur soumet le formulaire ou soumettre événement est déclenché sur la forme d'un programme.
Lorsque l'utilisateur modifie un champ de formulaire ou un événement de changement déclenché sur le formulaire par programme.
Envoyer les données du formulaire lors de la soumission
Pour activer le formulaire Ajax et envoyer les données du formulaire en cliquant sur Soumettre, vous devez automatiquement ajouter la classe ajax-submit au formulaire. Une fois que l'utilisateur a soumis le formulaire, Ajax enverra automatiquement les données du formulaire en utilisant les règles suivantes -
Les données du formulaire seront envoyées au fichier ou à l'URL mentionné dans l' attribut action du formulaire.
La méthode de demande sera similaire à celle mentionnée dans l' attribut method du formulaire.
Le type de contenu sera le même que celui mentionné dans l' attribut enctype du formulaire. S'il n'est pas mentionné par défaut, il s'agit de l' application / x-www-form-urlencoded .
Envoyer les données du formulaire lors du changement d'entrée
Nous pouvons soumettre les données du formulaire lorsque l'utilisateur apporte des modifications dans les champs du formulaire en utilisant la classe ajax-submit-onchange comme indiqué ci-dessous -
<form action = "send.html" method = "GET" class = "ajax-submit-onchange">
...
</form>Lorsque l'utilisateur modifie un champ de formulaire, les données du formulaire seront envoyées automatiquement en utilisant Ajax avec les mêmes règles que celles décrites ci-dessus.
Événement de soumission Ajax
Pour obtenir la réponse XHR réelle du fichier / URL où vous avez envoyé les données, vous pouvez utiliser des événements spéciaux comme indiqué ci-dessous -
| S. Non | Description de l'évenement | cible |
|---|---|---|
| 1 | submitted Cet événement sera déclenché après une demande Ajax réussie. |
Élément de formulaire <form class = "ajax-submit"> |
| 2 | beforeSubmit
Cet événement sera déclenché juste avant la requête Ajax. |
Élément de formulaire <form class = "ajax-submit"> |
| 3 | submitError Cet événement sera déclenché sur une erreur de requête Ajax. |
Élément de formulaire <form class = "ajax-submit"> |