【jQuery】$.get()でGETリクエストを送信する完全ガイド｜URLパラメーター・JSON取得・キャッシュ制御・fetch比較まで

jQueryの $.get() を使うと、ページをリロードせずにサーバーからデータを取得できます。この記事では基本的なGET送信・URLパラメーターの扱い・JSONデータ取得・キャッシュ制御・Fetch APIとの比較まで解説します。

$.get() の基本的な使い方

// $.get(url, data, callback)
$.get('/api/users', function (response) {
  console.log('ユーザー一覧:', response);
});

// Promiseチェーンで書く（推奨）
$.get('/api/users')
  .done(function (data, textStatus, jqXHR) {
    console.log('成功:', data);
    console.log('ステータス:', jqXHR.status); // 200
  })
  .fail(function (jqXHR, textStatus, errorThrown) {
    console.error('エラー:', jqXHR.status, errorThrown);
  })
  .always(function () {
    // 成功・失敗に関わらず実行（ローディング非表示など）
    $('#loading').hide();
  });

URLパラメーターをオブジェクトで渡す

データをオブジェクトで渡すと、jQueryが自動的にURLエンコードしてクエリ文字列に変換します。

// オブジェクトで渡す → /api/users?page=2&limit=20&keyword=%E5%B1%B1%E7%94%B0 に変換
$.get('/api/users', {
  page:    2,
  limit:   20,
  keyword: '山田'
})
  .done(function (data) {
    console.log('取得件数:', data.length);
  });

// $.param() で手動エンコードする場合
var params = $.param({ page: 2, limit: 20 });
console.log(params); // 'page=2&limit=20'
$.get('/api/users?' + params, function (data) {
  console.log(data);
});

JSONデータを取得する（$.getJSON）

$.getJSON() は $.get() の shorthand で、レスポンスを自動的にJSONとしてパースします。詳しくはJSONデータを取得する方法も参照してください。

// レスポンスを自動でJSONパース
$.getJSON('/api/config', function (data) {
  console.log('設定データ:', data);
  console.log('テーマ色:', data.themeColor);
});

// $.ajax() で同等の処理
$.ajax({
  url:      '/api/config',
  type:     'GET',
  dataType: 'json'
})
  .done(function (data) {
    console.log(data);
  });

キャッシュを制御する

GETリクエストはブラウザにキャッシュされます。常に最新データを取得したい場合はキャッシュを無効化してください。

// キャッシュを無効化（タイムスタンプを付加）
$.ajax({
  url:   '/api/latest-news',
  type:  'GET',
  cache: false  // → ?_=1234567890 のようなパラメーターが自動付加される
})
  .done(function (data) {
    console.log('最新ニュース:', data);
  });

// 全AjaxでキャッシュをOFFにする（グローバル設定）
$.ajaxSetup({ cache: false });

ローディング状態の表示

$(function () {
  function loadData() {
    // ローディング表示
    $('#loading').show();
    $('#content').empty();

    $.get('/api/articles')
      .done(function (data) {
        // データを描画
        $.each(data, function (i, article) {
          var $li = $('<li>').text(article.title);
          $('#content').append($li);
        });
      })
      .fail(function () {
        $('#content').html('<p class="error">データの取得に失敗しました</p>');
      })
      .always(function () {
        $('#loading').hide(); // 成功・失敗どちらでも非表示
      });
  }

  $('#reload-btn').on('click', loadData);
  loadData(); // 初回読み込み
});

$.get() / $.getJSON() / fetch() の使い分け

まとめ

jQueryでGETリクエストを送信する際のポイントをまとめます。

• 基本: $.get(url, data) → .done()/.fail()/.always()
• パラメーター: オブジェクトで渡すと自動URLエンコード
• JSON取得: $.getJSON() で自動パース
• キャッシュ無効化: $.ajax({ cache: false })
• ローディング: .always() で必ず非表示処理

関連記事: POSTリクエストを送信する方法 / JSONデータを取得する方法 / 検索サジェスト機能の完全ガイド

よくある質問（FAQ）