ajaxのエラー(500 internal server error)の解決方法

ajax通信処理でこの画像のように500 (Internal Server Error)と表示さる場合、js側ではなくサーバープログラムが間違っています。

どういうエラーなのか確かめるにはデベロッパーツールのNetworkタブを確認します。サーバーからレスポンスを受け取った以降のすべての通信内容がNetworkに表示されます。

エラーで返ってきた通信（ここはではajax.php）をクリックして右に出てくるパネルのPreviewタブを見るとエラー内容を確認できます。

500エラーで返ってきているのにPreviewタブに何も表示されない場合は、サーバー側でエラーを出力させない設定になっている可能性があります。
その場合は該当のPHP処理の先頭で

<?php
ini_set('display_errors',1);

と記述してみてください。

エラー内容を確認して原因が明らかな場合はそこを修正しておしまい。ただどこがバグの原因かわからない場合はデバッグしてく必要があります。

ひとつはprintデバッグです。printやvar_dumpを挟んでデバッグします。直後にexitかdieさせればprint内容もNetworkタブのPreviewタブで確認できます。

もう一つデバッガーです。ajaxリクエストもステップ実行が可能なのでそれで確認していきます。

以上、ajaxエラーの原因突き止め方法でした。

余談）google search consoleで検索ワード見てると「ajax 500 internal server error」とかでこのブログが表示されている回数が多かったのでちょっと書いてみました。