Javascriptだけで値をPOSTして、ページ遷移もする方法

ちょっとした事情があって、Javascriptだけで値をPOSTし、ページ遷移もしたいなということがありました。

HTMLでタグを書いて、<input> とか<submit>とかやればいいんですが、ちょっとした値を渡したいだけなので、面倒だな、というのが事情でした。(大した事情ではなかった)

しかし、ググっても意外と出てこないんですよ。

Googleさんが出してくれるのは、AjaxでPOSTして値を取ってきましょう ってページばっかり…。同じページに、Javascriptでページ遷移しようみたいなのもあったりするので、Hitするんですかね。

「それじゃ…ダメ…っ!違うっ…!HTMLでやるみたいにやりたいんだ…っ!」

と思い、英語でググったところ、StackOverflowさんにドンピシャでありました。

「ククク…カイジくん…!君が求めていたのは…これ…っ!」

「あ…ありがてぇ…っ!!!formタグを作ってそれにパラメーターを含んだinputタグを作るという悪魔的発想!!!サンプルコードをコピペするだけで、やりたいことができちまった…!」

と感動しましたので、ここでも紹介させていただきます。
Rakesh Pai さんに大感謝ですね。┌o ペコッ

下記に掲載されていたサンプルコードを掲載しておきます。

/**
 * 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 paramiters to add to the url
 * @param {string} [method=post] the method to use on the form
 */

function post(path, params, method='post') {

  // The rest of this code assumes you are not using a library.
  // It can be made less wordy if you use one.
  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("index.php", {val:"hogehoge"});

転載元はこちら

https://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit/133997#133997

Javascriptだけで次のページにパラメーターをPOSTで渡したいJavascripterのみんなに届け♡

英語で探すって大事だね…(´ω`)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です