JavaScriptでGETとPOST変数を取得する方法

2024-04-03

jQueryでGETとPOST変数を取得する方法

GET変数は、URLにエンコードされた形で送信されます。例えば、以下のURLの場合：

https://example.com/index.php?name=John&age=30

name と age はGET変数です。

jQueryでGET変数を取得するには、以下の方法があります。

$.getUrlParam()

var name = $.getUrlParam('name');
var age = $.getUrlParam('age');

console.log(name); // John
console.log(age); // 30

location.search

var params = location.search.substring(1).split('&');

var name = params[0].split('=')[1];
var age = params[1].split('=')[1];

console.log(name); // John
console.log(age); // 30

POST変数は、リクエストボディにエンコードされた形で送信されます。

$.ajax()

$.ajax({
  url: 'index.php',
  type: 'POST',
  data: {
    name: 'John',
    age: 30
  },
  success: function(response) {
    // ...
  }
});

response には、サーバーからの応答データが格納されます。

<html>
<head>
  <title>GET変数を取得するサンプル</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <script>
    $(function() {
      // URLからGET変数を取得
      var name = $.getUrlParam('name');
      var age = $.getUrlParam('age');

      // 取得した値を表示
      console.log('名前：' + name);
      console.log('年齢：' + age);
    });
  </script>
</body>
</html>

このコードを実行すると、ブラウザのコンソールに以下のような出力が出力されます。

名前：John
年齢：30

POST変数を取得するサンプルコード

<html>
<head>
  <title>POST変数を取得するサンプル</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <form action="index.php" method="post">
    <input type="text" name="name" value="John">
    <input type="text" name="age" value="30">
    <input type="submit" value="送信">
  </form>

  <script>
    $(function() {
      // フォーム送信時にajaxでPOST変数を送信
      $('form').submit(function(e) {
        e.preventDefault();

        var name = $('input[name="name"]').val();
        var age = $('input[name="age"]').val();

        $.ajax({
          url: 'index.php',
          type: 'POST',
          data: {
            name: name,
            age: age
          },
          success: function(response) {
            // ...
          }
        });
      });
    });
  </script>
</body>
</html>

このコードを実行すると、フォーム送信時にindex.php

GETとPOST変数を取得する他の方法

var params = location.href.split('?')[1].split('&');

var name = params[0].split('=')[1];
var age = params[1].split('=')[1];

console.log(name); // John
console.log(age); // 30

var params = window.location.search.substring(1).split('&');

var name = params[0].split('=')[1];
var age = params[1].split('=')[1];

console.log(name); // John
console.log(age); // 30

POST変数

FormData

var formData = new FormData();

formData.append('name', 'John');
formData.append('age', 30);

var xhr = new XMLHttpRequest();

xhr.open('POST', 'index.php');
xhr.send(formData);

URLSearchParams

var params = new URLSearchParams();

params.append('name', 'John');
params.append('age', 30);

var xhr = new XMLHttpRequest();

xhr.open('POST', 'index.php');
xhr.send(params.toString());