勉強したことのメモ

webプログラマが勉強したことのメモ。

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

   

サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けて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のプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。 簡単に使える ...

javascriptとPHPで正規表現を使う場合

とりあえず使いそうなのは検索と置換。 ■javascript var str = ...

NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え

チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...

youtubeの埋め込みをポップアップ表示させる方法

youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...

jquery.cookie.jsでcookieを取り扱う

機能拡張の依頼があってそのページを見たら jquery.cookie.jsが読み ...

jQueryのfind時に複数のセレクタ指定

<div id="hoge"> <a hr ...

FileReader APIを用いて画像をアップロードせずにサムネイル表示

以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...

配列をjQueryで取り扱う

やりたかった事は、 ・テキストボックスが複数ある。そのページに送信するクエリによ ...

クロスドメインのiframeで子フレームから親フレームにheightの値を渡す

やりたかった事は、 ・iframeで子フレームから親フレームにheightの値を ...

pjaxについてのメモ

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