Bootstrapでajaxメソッドを使うときに、Bootstrap公式で紹介されている組み込みコードをそのまま使うとエラーになってしまうので、その対応方法のメモです。
Uncaught TypeError: $.ajax is not a function
Bootstrapを組み込んだ上で、jQueryのajaxメソッドを使おうとすると、Uncaught TypeError: $.ajax is not a function
のエラーが出て正常動作しないことがあります。(Google Chromeのデバッガの例です)
原因
これはBootstrapのjQuery組み込みコードに原因があります。Bootstapの公式で紹介されている組み込みコードは、以下のようになっています。
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
1行目でjQueryの本体を組み込んでいますが、jquery-3.2.1.slim.min.jsはjQueryのスリムビルドと呼ばれるバージョンで、非推奨の機能やAjaxの機能が削除された軽量版になっています。スリムビルドはjQueryのバージョン3から提供され始めたものなので、知らない方も多いのではないでしょうか。
したがって、上記コードでjQueryを組み込むとjQueryのAjaxメソッドは使用できません。組み込むjQueryをjquery-3.2.1.min.jsとする必要があります。ハッシュも変わるため、以下のコードに変更するとAjaxが使えるようになります。
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>