JavaScript、jQuery、Ajax を駆使！GET リクエストでパラメータを自在に操る

2024-04-23

JavaScript、jQuery、Ajax を用いた GET リクエストでのパラメータ渡し

このチュートリアルでは、JavaScript、jQuery、Ajax を使って、GET リクエストでサーバーにパラメータを渡す方法を解説します。

GET リクエストとパラメータ

GET リクエストは、サーバーからリソースを取得するために使用される HTTP リクエストメソッドです。パラメータは、リクエストに追加情報を含めるために使用されます。GET リクエストの場合、パラメータは URL にクエリ文字列として追加されます。

例：

https://example-com.cdn.ampproject.org/c/s/example.com//?id=123&name=John%20Doe

上記の URL では、id と name という 2 つのパラメータが渡されています。

jQuery を使用すると、GET リクエストでパラメータを渡すのが簡単になります。以下のコードは、$.get() メソッドを使用して、id と name というパラメータを含む GET リクエストを送信する方法を示しています。

$.get("https://example-com.cdn.ampproject.org/c/s/example.com/", {
  id: 123,
  name: "John Doe"
}, function(data) {
  console.log(data);
});

このコードは以下の処理を実行します。

https://example-com.cdn.ampproject.org/c/s/example.com/ に GET リクエストを送信します。
リクエストに id と name というパラメータを含めます。
リクエストが成功すると、data パラメータにレスポンスが格納されます。
console.log(data) を使用して、レスポンスをコンソールに記録します。

補足

$.get() メソッドは、オプションのコールバック関数を受け取ります。この関数は、リクエストが成功したときに実行されます。
コールバック関数の引数 data は、サーバーからのレスポンスデータです。
パラメータオブジェクトは、キーと値のペアの形式で指定できます。
複数のパラメータを渡す場合は、カンマ区切りで区切ります。

$.get("https://example-com.cdn.ampproject.org/c/s/example.com/", {
  id: 123,
  name: "John Doe",
  age: 30
}, function(data) {
  console.log(data);
});

このチュートリアルでは、JavaScript、jQuery、Ajax を使用して GET リクエストでパラメータを渡す方法を説明しました。この手法は、サーバーからデータを動的に取得する Web アプリケーションを開発する際に役立ちます。

$.get("https://example.com/data.json", {
  id: 123,
  name: "John Doe"
}, function(response) {
  console.log(response);
});

https://example.com/data.json に GET リクエストを送信します。

このコードをどのように改善できますか？

実際の URL とパラメータ名に置き換えてください。
エラー処理を追加します。
レスポンスデータを使用して何かを実行します。

$.get("https://api.example.com/users/123", {
  name: "John Doe"
}, function(user) {
  if (user) {
    console.log("User retrieved:", user);
    $("#user-name").text(user.name);
  } else {
    console.error("Failed to retrieve user");
  }
});

リクエストが成功すると、user 変数にレスポンスデータ (JSON オブジェクト) が格納されます。
user が存在する場合、コンソールにログを記録し、#user-name 要素のテキストをユーザー名に設定します。
user が存在しない場合、コンソールにエラーメッセージを記録します。

このコードはほんの一例です。GET リクエストでパラメータを渡す方法は他にもたくさんあります。ニーズに合わせてコードをカスタマイズしてください。

GET リクエストでパラメータを渡すその他の方法

XMLHttpRequest (XHR) は、ブラウザと Web サーバー間で非同期通信を行うための JavaScript API です。XHR を使用して GET リクエストを作成し、パラメータを設定し、レスポンスを処理することができます。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json?id=123&name=John%20Doe');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('Error:', xhr.statusText);
  }
};
xhr.send();

Fetch API は、より現代的な非同期 HTTP リクエストを行うための JavaScript API です。XHR よりも簡潔で使いやすい構文を提供します。

fetch('https://example.com/data.json?id=123&name=John%20Doe')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Location オブジェクトを使用して、現在の URL を操作し、パラメータを追加することもできます。ただし、この方法は、新しいページに移動する GET リクエストを作成する場合にのみ適しています。

const url = new URL(window.location.href);
url.searchParams.set('id', 123);
url.searchParams.set('name', 'John Doe');
window.location.href = url.toString();

使用する方法は、ニーズと好みによって異なります。