勉強したことのメモ

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でページ表示時にラジオボタンやチェックボックスにcheckedがついている場合にイベントを実行する方法

ラジオボタンやチェックボックスをチェックした際に、jQuery側で何らかのイベン ...

FormDataを使ったAjax通信がiPhoneのみエラー

FormDataオブジェクトを使用したAjax通信するシステムがあり、PCやAn ...

jQuery UIでカレンダーピッカー(Datepicker)の利用方法

フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...

SNSのシェア(いいね)ボタンを設置できるjQueryプラグイン「jsSocials」の利用方法

サイト内にSNSのシェア(いいね)ボタンを設置する際、WordPressだと何ら ...

jQueryにてclosestの使いどころとparent / parentsとの違いについて

あるソースコードを見ているとjQueryにてclosest()という使ったことの ...