jQueryのloadメソッドでファイル(ページ)を呼び出す
2022/01/27
サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けて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メソッドを使うことで色々回避することができそう。
関連記事
-
-
jQueryで要素を移動する方法のまとめ
jQueryで要素を移動する際、insertBefore / insertAft ...
-
-
jQuery.uploadでリアルタイムプレビュー
やりたい事は、 ・<input type="file">で画像を選択 ...
-
-
jQuery UIでカレンダーピッカー(Datepicker)の利用方法
フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...
-
-
NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え
チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...
-
-
jQueryでshow/hideよりaddClass/removeClassの方が速い
diaplay:none/blockする際に最近はshow()/hide()を ...