Comment soumettre dynamiquement une requête POST à ​​l'aide de JavaScript ?

Créer un formulaire dynamique et soumettre des requêtes POST

En JavaScript, nous avons souvent besoin d'envoyer des données à un serveur à l'aide d'une requête POST. Cependant, si la ressource nécessite la soumission d'un formulaire pour une réponse appropriée, nous avons besoin d'un moyen de simuler la soumission du formulaire de manière dynamique.

Utilisation de XMLHttpRequest

XMLHttpRequest est une méthode courante utilisée pour requêtes HTTP asynchrones. Cependant, il n'est pas idéal pour soumettre des formulaires car il n'est pas conçu pour gérer les données de formulaire de manière native.

Création dynamique d'éléments d'entrée

Une solution multi-navigateurs implique la création dynamique d'éléments d'entrée. et en les annexant à un formulaire. Nous pouvons ensuite soumettre ce formulaire par programme.

/**
 * sends a request to the specified url from a form. this will change the window location.
 * @param {string} path the path to send the post request to
 * @param {object} params the parameters to add to the url
 * @param {string} [method=post] the method to use on the form
 */
function post(path, params, method='post') {
  const form = document.createElement('form');
  form.method = method;
  form.action = path;

  for (const key in params) {
    if (params.hasOwnProperty(key)) {
      const hiddenField = document.createElement('input');
      hiddenField.type = 'hidden';
      hiddenField.name = key;
      hiddenField.value = params[key];

      form.appendChild(hiddenField);
    }
  }

  document.body.appendChild(form);
  form.submit();
}

Utilisation

Vous pouvez utiliser cette fonction pour envoyer une requête POST en créant et en soumettant dynamiquement un formulaire :

post('/contact/', {name: 'Johnny Bravo'});

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!