JavascriptとPHPでデータのやり取りをする方法

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

LAMP環境でWEBシステムを構築していると、しばしばJavascriptとPHPでそれぞれ扱っているデータをやり取りしたくなる時がある。
 

例えば、サーバーに保存されているデータをブラウザでうまく受け取りたい時や、
 

ブラウザで操作されたユーザーの行動データをPHPに受け渡したい時、
 

POST送信や画面遷移をさせずに、javascriptからPHPにデータを受け渡したい場合などの方法は、かなり初歩的だが、やったことの無い人の無いために、僕のやり方をソースコードで公開しておきます。

環境

ファイル一覧と役割

上記の非常に簡易な構成を基準に、下記のシナリオを実行してみたいと思います。
 

プログラム・シナリオ

  1. 「JavascriptからPHPへデータ送信」index.htmlをブラウザで表示した時に、data.txtに書かれている任意の値を表示する
  2. 「PHPからjavascriptへデータ送信」ブラウザ上の入力フォームに書かれたデータをページ遷移させずにdata.txtに追記する

ソースコード

スクリーンショット 2017-12-31 23.16.23

JavascriptからPHPへデータ送信の解説

「送信」ボタンをクリックすると、Javascriptからajax処理でPHPにデータを送信します。
 

受信したPHPは、そのデータをdata.txtに書き込む処理を行なう。
 

common.jsの「// data-write」の箇所がその処理になります。
 

この処理で同時に行うべき内容は、入力した文字列を送信後に項目内をクリアしなければいけません。
そうすることで、次の入力をスムーズに行えるようになります。
 

また、送信したデータが正常にサーバーに送られた後で、PHP側で、ファイルに書き込んだ内容を返すことで、HTMLページ内のテキストファイル内容を表示に繁栄します(追記)。

PHPからjavascriptへデータ送信の解説

ページを読み込んだらすぐにPHPで読み取ったdata.txtファイルの内容をjavascriptに送ります。
※ただechoするだけですが・・・
 

javascriptでは、データを全て受け取りますが、単なる文字列なので、データのレコードを改行単位で行なっている仕様を繁栄して、改行を配列に分解します。
 

その後、divタグで配列のそれぞれをラップして、id=”list”の内部に書き込みます。

つまずきポイント

今回はChromeブラウザの最新版(63.0.3239.84)で確認していますが、ブラウザ互換が必要な人、IEや他のブラウザが必須という人は、ajax処理の箇所をjQueryを使うか、以前記事のajaxプログラムを利用してください。
 

[Javascript] Ajaxライブラリ
 

ちなみに、このプログラムを少しだけ改良すると、簡易な掲示板が作れるので、初心者の方がWEBシステム開発を行うサンプルとしてご利用ください。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です