jQueryのloadメソッドでファイル(ページ)を呼び出す

サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けてPHPのinclude関数で呼び出すことが多い。ただPHPが利用不可の案件があり、どうしようかと調べたところjQueryのloadメソッドを使うことで呼び出しできるとのこと。以下に方法をメモ。

リファレンス

http://semooh.jp/jquery/api/ajax/load/+url%2C+data%2C+callback+/

ソースコード

<script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(function(){
    $('#result').load('https://hoge.com/hoge.php', function(data, status){
        if( status !== 'success' ){
            console.log('error');
        }
    });
});
</script>

呼び出す際はGETパラメータの付与も可能。

クロスドメインの場合

異なるドメインのページを呼び出す場合、CORSの問題で呼び出せないことがある。そのような場合は呼び出される側のサーバに以下を記述したhtaccessファイルを設置すること。

Header append Access-Control-Allow-Origin: *

所感

ごく稀にPHPが使えない環境で何らかの機能を搭載して欲しいみたいな案件があるがjQueryのloadメソッドを使うことで色々回避することができそう。