Comment envoyer des requêtes x-www-form-urlencoded avec Fetch ?

Envoi de requêtes x-www-form-urlencoded avec Fetch

Dans le développement Web, la publication de données codées sous forme de formulaire sur un serveur est courante tâche. Pour ce faire à l'aide de l'API Fetch, quelques étapes sont nécessaires.

• Définir les paramètres de la requête :

  • Commencez par définir les paramètres du formulaire que vous souhaitez POST. Dans l'exemple fourni :

    {
        'userName': '[email protected]',
        'password': 'Password!',
        'grant_type': 'password'
    }

• Objet de requête de construction :

  • Créer un Objet JavaScript avec les propriétés de requête nécessaires :

    var obj = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      },
    };

• Encoder les paramètres du formulaire :

  • Pour inclure des paramètres codés sous forme de formulaire, utilisez un objet URLSearchParams :

    body: new URLSearchParams({
        'userName': '[email protected]',
        'password': 'Password!',
        'grant_type': 'password'
    })

• Exécuter la demande :

  • Enfin, exécutez la requête en utilisant l'objet nouvellement construit :

    fetch('https://example.com/login', obj)
      .then(function(res) {
        // Do stuff with result
      }); 

• Exemple simplifié :

  • Pour plus de simplicité, une approche plus propre consiste à spécifier à la fois les paramètres du formulaire et l'en-tête directement dans les options fetch() :

    fetch('https://example.com/login', {
        method: 'POST',
        headers:{
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new URLSearchParams({
            'userName': '[email protected]',
            'password': 'Password!',
            'grant_type': 'password'
        })
    });

Référez-vous à la documentation du Mozilla Developer Network pour des informations plus détaillées : https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

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!