JavaScript を使用して POST リクエストを動的に送信するにはどうすればよいですか?

動的フォームを作成し、POST リクエストを送信する

JavaScript では、多くの場合、POST リクエストを使用してサーバーにデータを送信する必要があります。ただし、リソースが適切な応答を得るためにフォームの送信を必要とする場合は、フォームの送信を動的にシミュレートする方法が必要です。

XMLHttpRequest の使用

XMLHttpRequest は、次の目的で使用される一般的なメソッドです。非同期 HTTP リクエスト。ただし、フォーム データをネイティブに処理するように設計されていないため、フォームの送信には最適ではありません。

入力要素を動的に作成する

クロスブラウザ ソリューションには、入力要素を動的に作成することが含まれます。そしてそれらをフォームに追加します。その後、このフォームをプログラムで送信できます。

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

使用法

この関数を使用して、フォームを動的に作成して送信することで POST リクエストを送信できます。

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

以上がJavaScript を使用して POST リクエストを動的に送信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。