勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

   2022/01/27  jQuery JavaScript

サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けて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 JavaScript

  関連記事

「input type="number"」のテキストボックスを桁数制限且つ半角数値のみ入力可にする方法

「input type="number"」のテキストボックスに対して「2桁まで」 ...

JavaScript / jQueryにてページ表示時に指定したテキストボックスにフォーカスさせる方法

ページを開いた際に指定したテキストボックス(input type="text") ...

DateTimePickerで特定日にClassを付与&選択不可にする方法

jQueryプラグインのDateTimePikerで特定の日にClassを付与し ...

pjaxについてのメモ

ずっと気になっていたpjaxについてのメモ。 ■参考サイト http://chi ...

ラジオボタンのカスタムデータ属性を取得し、特定の値の場合はチェックさせない方法

ASPを使用したサイトで特定のradioボタンは選択不可にしたいというケースがあ ...