jQueryでajaxが使えない($.ajax is not a function)

結論

スリム版ではなく通常版を使いましょう。

Uncaught TypeError: $.ajax is not a function

jQuery で ajax を使って非同期でAPIなどを呼び出す場合、次のようなコードになります。jQuery3以上のバージョンです。

$.ajax({
    url: './api.php',
    type: 'POST',
    data: {}
}).done(data => {
    console.log(data);
}).fail(data => {
    console.error(data);
}).always(data => {

});

こんな感じで ajax を使おうとすると、次のようなエラーが発生しました。

Uncaught TypeError: $.ajax is not a function

ちなみにjQueryでの要素の取得などは動きます。

jQuery slim 版では ajax は使えない

jQueryの基本機能は動くのに ajax が使えない場合、jQuery がスリム版ビルドになっていることが原因だと思われます。

スリム版は以下のメソッドが使えない状態になった軽量版のjQueryです。

• animate
• stop
• finish
• slideDown
• slideUp
• slideToggle
• fadeIn
• fadeOut
• fadeToggle
• fadeTo
• ajax関連

アニメーションやエフェクト、ajax関連のAPIが使えなくなる代わりに、ファイルサイズ等が多少小さくなっています。

したがって、スリム版ではなく、通常版のjQueryを読み込むことで使えるようになります。

Bootstrap は slim版を使う

ちなみに、この現象は Bootstrap を使用しているときに遭遇しました。

BootsrapはjQueryに依存するので、jQueryを読み込まないといけないのですが、公式サイトのQuickStartには次のようにあります。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

1行目がjQueryを読み込む箇所ですが、slim版を使っていることがわかります。Bootstrapを利用するサイトで、ajax等を使いたい場合は通常版を使いましょう。もちろんBootstrapには影響ありません。

以上。