勉強したことのメモ

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

  関連記事

jQueryにて指定した要素を検索条件から除外するnot()の利用方法

あるソースコードを拝見しているとjQueryでnot()という使ったことの無いメ ...

jquery.snipeの使い方

使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...

「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法

「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...

FullCalendarでラベルごとに表示・非表示を切り替える方法

Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意 ...

jQuery UI Datepickerで日本の祝祭日を表示

やりたかった事は、jQueryのカレンダーピッカーで 日本の祝祭日の色を変えると ...