Wie sende ich dynamisch eine POST-Anfrage mit JavaScript?

Erstellen Sie ein dynamisches Formular und senden Sie es für POST-Anfragen

In JavaScript müssen wir häufig Daten mithilfe einer POST-Anfrage an einen Server senden. Wenn die Ressource jedoch für eine ordnungsgemäße Antwort die Übermittlung eines Formulars erfordert, benötigen wir eine Möglichkeit, die Übermittlung des Formulars dynamisch zu simulieren.

Verwendung von XMLHttpRequest

XMLHttpRequest ist eine häufig verwendete Methode für asynchrone HTTP-Anfragen. Es ist jedoch nicht ideal zum Senden von Formularen, da es nicht für die native Verarbeitung von Formulardaten ausgelegt ist.

Dynamisches Erstellen von Eingabeelementen

Eine browserübergreifende Lösung beinhaltet das dynamische Erstellen von Eingabeelementen und sie an ein Formular anzuhängen. Wir können dieses Formular dann programmgesteuert übermitteln.

/**
 * 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();
}

Verwendung

Mit dieser Funktion können Sie eine POST-Anfrage senden, indem Sie dynamisch ein Formular erstellen und absenden:

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

Das obige ist der detaillierte Inhalt vonWie sende ich dynamisch eine POST-Anfrage mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!