interface Web
js tutoriel
Appeler une action de formulaire SvelteKit (ou soumettre un formulaire) à partir d'un composant
Appeler une action de formulaire SvelteKit (ou soumettre un formulaire) à partir d'un composant
Gestion des soumissions de formulaires à partir d'un composant SvelteKit
Soumettre un formulaire à partir d'un composant SvelteKit pour qu'il soit géré par une action de formulaire côté serveur est plus simple que vous ne le pensez. Vous n’avez pas besoin que le formulaire se trouve dans une page. Il peut vivre dans n’importe quel composant tout en continuant à interagir avec les fonctionnalités côté serveur de SvelteKit.
Cet article vous guidera dans la soumission d'un formulaire à partir d'un composant, son traitement à l'aide d'une action de formulaire par défaut à partir d'un +page.server.js et la configuration d'un +page.svelte pour lier le formulaire.
Structure du projet
mon-projet-sveltekit/
├──src/
│ ├── composants/
│ │ └── FormTestComponent.svelte
│ ├── itinéraires/
│ │ ├── +page.svelte
│ │ └── test/
│ │ └── +page.server.js
├── statique/
├── package.json
├── svelte.config.js
├── vite.config.js
└── tsconfig.json
1. Créez le FormTestComponent et ajoutez un formulaire
Tout d’abord, créons un FormTestComponent qui contient un formulaire simple :
<!-- src/lib/components/FormTestComponent.svelte --> <script> export let form; </script> <form> <input id="test" name="test" /> <button type="submit"> Submit </button> </form>
- Le composant FormInput est un champ de saisie personnalisé utilisé ici pour le formulaire.
- {form} est un raccourci pour form={form}, qui lie l'objet formulaire transmis de la page à ce composant.
À ce stade, nous disposons d'un formulaire de base prêt à être utilisé dans un composant, mais nous ne l'avons pas encore connecté à la gestion des formulaires côté serveur.
2. Configurez +page.svelte pour la liaison de formulaire
Maintenant, créez un fichier +page.svelte pour utiliser le FormTestComponent et liez son accessoire de formulaire.
<!-- routes/+page.svelte -->
<script>
import FormTestComponent from "$lib/components/FormTestComponent.svelte";
export let form; // This comes from the page’s server-side form response
</script>
<FormTestComponent {form} />
Points clés :
- export let form; : L'objet formulaire provient de la réponse à l'action du formulaire sur le serveur et est transmis à FormTestComponent. Cela lie les données de réponse du formulaire à l'accessoire de formulaire dans le composant.
- Réactivité : au fur et à mesure que le formulaire est soumis et mis à jour sur le serveur, l'objet du formulaire reflétera ces modifications côté client, gardant tout synchronisé.
3. Amélioration de la soumission du formulaire dans FormTestComponent
Pour gérer efficacement les soumissions de formulaires, SvelteKit fournit la directive use:enhance, qui vous permet d'améliorer le formulaire avec des fonctionnalités d'amélioration progressive telles que la gestion des soumissions sans rechargement complet de la page.
Voici comment améliorer la soumission du formulaire dans FormTestComponent :
<!-- src/lib/components/FormTestComponent.svelte -->
<script>
import { enhance } from "$app/forms";
import FormInput from "$components/forms/FormInput.svelte";
import { page } from "$app/stores";
let loading = false;
export let form;
$: console.log(form); // Log form response for debugging
</script>
<form
method="POST"
on:submit|preventDefault
action="/test"
use:enhance
>
<FormInput label="test" id="test" />
<button type="submit"> Submit </button>
</form>
Points clés :
- use:enhance : Cette directive améliore le formulaire pour gérer les soumissions sans rechargement complet. Cela facilite également la gestion des erreurs ou des mises à jour partielles du formulaire côté client.
- on:submit|preventDefault : cela empêche le comportement de soumission de formulaire par défaut du navigateur (un rechargement de page), permettant à SvelteKit de le gérer.
- action="/test" : Le formulaire pointe vers la route /test, que nous allons créer prochainement. Si nous utilisions une action nommée (comme l'inscription), l'URL ressemblerait à /test?/signup.
4. Création de l'action côté serveur
Pour traiter le formulaire sur le serveur, créez un répertoire dans /test avec un +page.server.js (ou +page.server.ts si vous préférez TypeScript).
Voici un exemple de ce à quoi pourrait ressembler l'action du formulaire dans +page.server.js :
// - /routes/test/+page.server.js
/** @type {import('./$types').Actions} */
export const actions = {
default: async ({ request }) => {
const data = await request.formData();
const formEntries = Object.fromEntries(data.entries()); // Convert form data to an object
console.log(formEntries); // Log form data on the server
return {
success: true,
message: "Yay!!"
};
}
};
Points clés :
- request.formData() : Cette méthode récupère les données du formulaire soumises à partir de la requête.
- Object.fromEntries(data.entries()) : Ceci convertit les données du formulaire en un format d'objet plus utilisable, où chaque nom de champ de formulaire devient une clé et sa valeur est la valeur correspondante.
C'est ici que le serveur traite le formulaire. Dans ce cas, nous enregistrons les données du formulaire et renvoyons un message de réussite. Dans un scénario réel, vous effectueriez probablement une validation et géreriez les erreurs.
5. Voir la réponse du formulaire
Une fois le formulaire soumis, vous verrez les données du formulaire enregistrées à la fois dans le terminal (côté serveur) et dans la console du navigateur (côté client). C'est grâce au console.log(form) dans le composant et au console.log(formEntries) dans le +page.server.js, qui enregistre respectivement la réponse du formulaire et le formulaire.
Conclusion
Vous avez maintenant créé avec succès un formulaire dans un composant SvelteKit qui soumet des données à une action de formulaire côté serveur. Vous n'avez pas besoin d'utiliser une page complète pour le formulaire et vous avez utilisé l'utilisation de SvelteKit : améliorer pour gérer les soumissions de manière transparente sans recharger la page.
Vous pouvez étendre cela en ajoutant une validation personnalisée, en gérant les erreurs ou même en effectuant des actions plus complexes comme le téléchargement de fichiers.
Bon piratage !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Appareils et contextes avancés JavaScript
Jul 24, 2025 am 12:42 AM
La portée de JavaScript détermine la portée d'accessibilité des variables, qui sont divisées en étendue globale, fonction et au niveau du bloc; Le contexte détermine la direction de cela et dépend de la méthode d'appel de fonction. 1. Les étendues incluent la portée globale (accessible n'importe où), la portée de la fonction (valide uniquement dans la fonction) et la portée au niveau du bloc (LET et const sont valides dans {}). 2. Le contexte d'exécution contient l'objet variable, la chaîne de portée et les valeurs de cela. Cela pointe vers global ou non défini dans la fonction ordinaire, l'appel de méthode pointe vers l'objet d'appel, le constructeur pointe vers le nouvel objet, et peut également être explicitement spécifié par appel / application / liaison. 3. La fermeture fait référence aux fonctions accédant et en se souvenant des variables de portée externes. Ils sont souvent utilisés pour l'encapsulation et le cache, mais peuvent provoquer
Comment obtenir la valeur d'un bouton radio sélectionné avec JS?
Jul 18, 2025 am 04:17 AM
Il existe deux méthodes de base pour obtenir la valeur du bouton radio sélectionné. 1. Utilisez QuerySelector pour obtenir directement l'élément sélectionné, et utilisez l'entrée [name = "Votre nom-radio"]: Sélecteur vérifié pour obtenir l'élément sélectionné et lire son attribut de valeur. Il convient aux navigateurs modernes et a un code concis; 2. Utilisez Document.PetelementsByName pour traverser et trouver la première radio vérifiée via la boucle Nodelist et obtenir sa valeur, qui convient aux scénarios compatibles avec les anciens navigateurs ou nécessitent un contrôle manuel du processus; De plus, vous devez faire attention à l'orthographe de l'attribut de nom, à la gestion des situations non sélectionnées et à un chargement dynamique du contenu
Maîtriser les modèles de concurrence JavaScript: les travailleurs du web contre les threads Java
Jul 25, 2025 am 04:31 AM
Il existe une différence essentielle entre les travailleurs Web de JavaScript et Javathreads dans un traitement simultané. 1. JavaScript adopte un modèle unique. WebWorkers est un fil indépendant fourni par le navigateur. Il convient pour effectuer des tâches longues qui ne bloquent pas l'interface utilisateur, mais ne peuvent pas utiliser le DOM; 2. Java prend en charge le multithreading réel à partir du niveau de la langue, créé via la classe de threads, adapté à un traitement simultanée complexe et côté serveur; 3. Les travailleurs Web utilisent PostMessage () pour communiquer avec le fil principal, qui est hautement sécurisé et isolé; Les threads Java peuvent partager la mémoire, de sorte que les problèmes de synchronisation doivent être prêts à prêter attention; 4. Les travailleurs Web sont plus adaptés à l'informatique parallèle frontale, comme le traitement d'image, et
API de composition Vue 3 Vs API Options: une comparaison détaillée
Jul 25, 2025 am 03:46 AM
CompositionAPI dans Vue3 convient plus à la logique complexe et à la dérivation de type, et OptionsAPI convient aux scénarios et débutants simples; 1. OptionsAPI organise le code en fonction d'options telles que les données et les méthodes, et a une structure claire mais les composants complexes sont fragmentés; 2. CompositionAPI utilise la configuration pour concentrer la logique liée, ce qui est propice à la maintenance et à la réutilisation; 3. CompositionAPI réalise la réutilisation logique sans conflit et paramétrisable par le biais de fonctions composables, ce qui est mieux que le mixin; 4. CompositionAPI a une meilleure prise en charge de la dérivation de type dactylographiée et de type plus précise; 5. Il n'y a pas de différence significative dans le volume de performances et d'emballage des deux; 6.
Techniques de débogage avancées pour les applications JavaScript complexes, en utilisant les principes du débogueur Java
Jul 17, 2025 am 01:42 AM
Le débogage des applications JavaScript complexes nécessite des outils d'utilisation systématiques. 1. Définissez des points d'arrêt et des points d'arrêt conditionnels pour intercepter les processus suspects, tels qu'avant l'entrée de la fonction, la boucle, le rappel asynchrone et le filtre en fonction des conditions; 2. Activer la fonction BlackBoxing pour bloquer les interférences de bibliothèque tierce; 3. Utiliser les déclarations du débogueur pour contrôler l'entrée de débogage en fonction du jugement environnemental; 4. Tracez le lien d'appel via CallStack, analysez le chemin d'exécution et l'état de la variable, localisez ainsi efficacement la cause profonde du problème.
Exploration des règles de coercition de type en javascript
Jul 21, 2025 am 02:31 AM
La coulée de type est le comportement de la conversion automatique d'un type de valeur en un autre type en JavaScript. Les scénarios courants incluent: 1. Lorsque vous utilisez des opérateurs, si un côté est une chaîne, l'autre côté sera également converti en une chaîne, comme '5' 5. Le résultat est "55"; 2. Dans le contexte booléen, les valeurs non cooliennes seront implicitement converties en types booléens, tels que des chaînes vides, 0, nuls, non définies, etc., qui sont considérées comme fausses; 3. Null participe aux opérations numériques et sera convertie en 0, et non défini sera converti en NAN; 4. Les problèmes causés par la conversion implicite peuvent être évitées grâce à des fonctions de conversion explicites telles que Number (), String () et Boolean (). La maîtrise de ces règles aide
Comment formater une date dans JS?
Jul 20, 2025 am 12:10 AM
Les dates de format dans JavaScript peuvent être implémentées via des méthodes natives ou des bibliothèques tierces. 1. Utilisez des coutures d'objets à date native: Obtenez la partie de date via Gettillyar, Getmonth, GetDate et d'autres méthodes, et les épisser manuellement dans des formats Yyyy-MM et d'autres, qui conviennent aux besoins légers et ne reposent pas sur des bibliothèques tierces; 2. Utilisez la méthode TolocaleDateString: vous pouvez sortir tel que le format mm / dd / yyyy en fonction des habitudes locales, en charge multilingue, mais le format peut être incohérent en raison de différents environnements; 3. Utilisez des bibliothèques tierces telles que Day.js ou Date-FNS: Fournit une syntaxe concise et des fonctions riches, adaptées aux opérations fréquentes ou lorsque l'extensibilité est requise, comme DayJS ()
Construire un outil CLI avec Node.js
Jul 24, 2025 am 03:39 AM
Initialiser le projet et créer package.json; 2. Créez un script d'entrée index.js avec shebang; 3. Registre des commandes via des champs bin dans package.json; 4. Utilisez des Yargs et d'autres bibliothèques pour analyser les paramètres de ligne de commande; 5. Utilisez le test local NPMLink; 6. Ajouter l'aide, la version et les options pour améliorer l'expérience; 7. Publier éventuellement via NPMPublish; 8. Affectuer éventuellement l'achèvement automatique avec Yargs; Enfin, créez des outils CLI pratiques grâce à une structure raisonnable et à une conception de l'expérience utilisateur, effectuer des tâches d'automatisation ou distribuer des widgets et se terminer par des phrases complètes.
