2018年10月5日 : HTML&CSS, jQuery

[jQuery] htmlファイル内でphpを部分的に動作させる

htmlの拡張子をphpに変える、でもなく、
.htaccessでhtmlファイルをphpとして振舞わせる、でもなく、
純粋にhtmlファイル内でphpで出力された物を表示する方法を考えてみました。

前提条件

  • .htmlの特定部分に.phpで書いた物を入れたい。
  • 「.htaccess」はさわらない。
  • jQueryに頼る事ができる状況。

アプローチとして考えられるもの

  • iframeで表示
  • jQueryのAjaxで.phpファイルから出力された値を受け取る
  • jQueryのload()で.phpファイルを読み込む

 

iFrameで表示

.htmlファイル内にiframeを設定して.phpファイルを指定。

手軽です。表示箇所が決め打ちになりますが、これで良さそうならこれで。
説明はWeb上でたくさん解説されていそうなので割愛します。
 

jQueryのAjaxで値を受け取る

phpから出力されたパラメータをAjaxで受け取ってJavaScriptで表示。
ちょっと調べてみたのですが、設定が微妙に大がかりになるので今回は次ので失礼します。
 

jQueryのload()で読み込む

iFrameの次に手軽に出来そうなのでこれで行こうと思います。
 

1、.phpファイルからは必要な部分だけ出力されるようにしておく

例 [ datetime.php ]

<p><?php
  date_default_timezone_set('Asia/Tokyo');

  echo '今日の日付と現在時刻は ';
  echo date("Y-m-d H:i:s");
?></p>

 

2、.htmlの入れ込みたい所にID又はClassを付けた<div>を配置。

例 [ view_date.html ]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">

    <title>jQueryのload()でphpファイルを読み込むサンプル</title>

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="load_datetime_php.js"></script>
  </head>
  <body>

    <h1>現在時刻を表示</h1>

    <div id="draw_date">
      <!-- ここに時間が入ります -->
    </div>

  </body>
</html>

 

3、jQueryのload()で.phpを読み込んで上記IDの<div>に流し込む。

例 [ load_datetime_php.js ]

$(function(){
  // id="draw_date" 内にロード
  $('#draw_date').load('datetime.php');
});

上記サンプル [ 日付と現在時刻を表示 ]
 

特記事項

load()も処理的にはAjaxっぽいです。
サーバーから取ってくる処理なのでローカル環境では動かないようです。

ちなみにどんな感じで読み込まれてるかはGoogle Chromeの「検証」機能で見ると分かりやすかったりします。
 

参考サイト

 

余談

もともとphpのカウンタをhtml内で表示出来ないかと思って調べてたのですが、
解説されてるのは大抵「.htaccess」で設定する方法だったので、別のアプローチをと思い記事にしてみました。

jQueryのAjaxも、また何か機会があったら調べて使ってみたいところです。
(JavaScript直でAjaxするより楽そうですし)
 

この記事へのコメント

コメントはありません。

コメントを書き込む

※タグは使えません。※メールアドレスは公開されません(記録はされます)。
※初書き込みの場合は承認されるまで表示されません。
※内容によって管理人判断で非承認・非表示化する場合があります。ご了承ください。

four × 3 =