Maison > interface Web > js tutoriel > Comment publier des données de formulaire en tant que « application/x-www-form-urlencoded » avec l'API Fetch ?

Comment publier des données de formulaire en tant que « application/x-www-form-urlencoded » avec l'API Fetch ?

Barbara Streisand
Libérer: 2024-11-03 05:28:02
original
924 Les gens l'ont consulté

How to Post Form Data as

Publication de données de formulaire avec l'API Fetch

Lorsque vous utilisez l'interface FormData dans l'API Fetch pour publier des données de formulaire, il est important de comprendre son comportement par défaut. Par défaut, il envoie les données au format "multipart/form-data", qui n'est pas compatible avec le format "application/x-www-form-urlencoded".

Si vous souhaitez publier les données du formulaire sous forme "application/x-www-form-urlencoded" à l'aide de l'API Fetch, vous pouvez suivre ces étapes :

  1. Convertir FormData en URLSearchParams : Utilisez une boucle pour parcourir l'objet FormData et ajoutez chaque paire clé-valeur à un objet URLSearchParams.

    <code class="javascript">const data = new URLSearchParams();
    for (const pair of new FormData(formElement)) {
        data.append(pair[0], pair[1]);
    }</code>
    Copier après la connexion

    OU, utilisez la méthode expérimentale :

    <code class="javascript">const data = new URLSearchParams(new FormData(formElement));</code>
    Copier après la connexion

    Remarque : assurez-vous que votre Le navigateur prend en charge cette dernière méthode avant de l'utiliser.

  2. Envoyer des données à l'aide de l'API Fetch : Effectuez une requête POST avec le corps défini sur l'objet URLSearchParams. Ne spécifiez pas d'en-tête Content-Type, car la valeur par défaut sera "application/x-www-form-urlencoded".

    <code class="javascript">fetch(url, {
        method: 'post',
        body: data,
    })
    .then(…);</code>
    Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal