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メソッドを使うことで色々回避することができそう。
関連記事
Ajaxを使用する際の注意
Ajaxで特にJSONPを使う際によくミスることがあるので 注意点をまとめておく ...
tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)
テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブ ...
jQueryでUNIXタイムスタンプの取得
jQueryでUNIXタイムスタンプを取得したい場合、 $.now()だけで取得 ...
formでdisplay:none;にしてても送信される
formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...
要素の点滅
やりたかった事はaタグ内で囲まれている部分を点滅。 <blink>だ ...