#はじめに
最近PHPの便利さに気づいた僕です。
サーバー側のプログラミングは初めてだったけど思ったほど難しくなかったです。
では、そのPHPとJSでデータを共有させて見たいと思います！
今回はJSの中でもjQueryを使います。
JSのデータを保存する方法と
PHPとJSでデータを共有する方法を一気にやります！
#流れ
- JSでデータを作ってjQueryのajax通信でPHPに送信
- PHPで送られてきたJSONデータをファイルに保存
- PHPからJSにデータを共有
- JSでJSONファイルを取得してPHPからのデータと照合
#準備
先にJSONファイルの作成とjQueryのダウンロード等をしましょう。
今回作るファイル
- index.php
- script.js
- save.php
- data.json
index.phpにscript.jsとjQueryを入れときましょう。
#JSONデータを作る
まずはJSで送信するJSONを作成して、
ajax通信でPHPにデータを送ります。
//送信するオブジェクトを作る
var send_data = {"name":"ふれい","like":"アニメ"};
//オブジェクトをJSONの型にする
send_data = JSON.stringify(send_data)
//ajax通信
$.ajax({
type:"POST",
url:"save.php",
contentType: "Content-Type: application/json; charset=UTF-8",
data:send_data,
error : function(XMLHttpRequest, textStatus, errorThrown) {
console.log("ajax通信に失敗しました");
//失敗した時の処理
},
success : function(response) {
console.log("ajax通信に成功しました");
//成功した時の処理
}
})
##ajaxについて
ajaxは非同期通信をします。
非同期通信では送りたいデータのみを送信して、画面のリロードなしでデータのやり取りができます。
また、サーバーからのレスポンスがなくても他の作業ができます。
type => 送信する方法 POSTやGETなど
url => データを送信する場所
contentType => 送信するデータのタイプです。多分いらないけど一応書いてます。
data => 送信するデータ
#PHPで受け取ってデータを保存する
受け取る側のPHPを書きます
//送信先のJSONのURL
$jsonUrl = "data.json";
//JSON内のデータを受け取る
if(file_exists($jsonUrl)){
$json = file_get_contents($jsonUrl);
$jsonData = json_decode($json, true);
}else{
echo "No Data";
}
//JSからのデータを受け取る
$data = file_get_contents('php://input');
$data = json_decode($data);
//配列を合体させて保存
$jsonData = array_merge($jsonData, $data);
$jsonData = json_encode($jsonData);
file_put_contents($jsonUrl, $jsonData);
送られてきたJSONデータを受け取るには
file_get_contents('php://input')
を使います。
関数の引数は固定です。この中に入ってるらしい。
JSONデータをPHP内で扱うために
json_decode()
を使います。これでJSONデータをPHP内で使える形にします。
逆に保存するときは、
json_encode()
でJSON形式に戻します。
これで保存は完了です。
#PHPからJSにデータを共有
##送るデータをセッションに保存
save.phpにコードを追加しましょう。
//セッションを使うおまじない
session_start();
//送信先のJSONのURL
$jsonUrl = "data.json";
//JSON内のデータを受け取る
if(file_exists($jsonUrl)){
$json = file_get_contents($jsonUrl);
$jsonData = json_decode($json, true);
}else{
echo "No Data";
}
//JSからのデータを受け取る
$data = file_get_contents('php://input');
$data = json_decode($data);
//セッションにデータを保存します
$_SESSION['name'] = $data['name'];
//配列を合体させて保存
$jsonData = array_merge($jsonData, $data);
$jsonData = json_encode($jsonData);
file_put_contents($jsonUrl, $jsonData);
セッションについては省略するので調べて見てね。
簡単に言えば同じサイトのPHPファイル内で共有して使えるデータですね。
なのでこれを index.php に表示して見ます。
##index.phpに表示
<?php
//セッションを使うおまじない
session_start();
?>
<!DOCTYPE html>
<html lang="ja">
<body>
<div id="name">
<?php
if(isset($_SESSION['name'])){
echo "${_SESSION['name']}";
}else{
echo "ゲスト";
}
?>
</div>
</body>
</html>
HTML内は必要なとこ補ってください。
これで$_SESSION['name']が存在すればdivの中身が登録したセッションになりますね。
これをJSで取り出します！
##JSでデータの取り出し
var name = $("#name").text();
name = username.replace(/\s+/g, "");
前に書いた部分は一旦省略です。
HTMLの中身はjQueryを使って.text()で簡単に取り出せます。jQueryすごい。
さてここで注意！
(理由は全くわかりませんが！)大量のスペースが取り出した時に入ってますなぜか。なのでreplaceを使って全部取り除きましょう！
誰か理由わかれば教えてください...
これでPHPからのデータを取り出せましたね！
#JSでJSONファイルを取得してPHPからのデータと照合
さて最後です。
PHPで保存したJSONファイルを取得して、PHPからのデータと照らし合わせて見ましょう。
//送信するオブジェクトを作る
var send_data = {"name":"ふれい","like":"アニメ"};
//オブジェクトをJSONの型にする
send_data = JSON.stringify(send_data)
//ajax通信
$.ajax({
type:"POST",
url:"save.php",
contentType: "Content-Type: application/json; charset=UTF-8",
data:send_data,
error : function(XMLHttpRequest, textStatus, errorThrown) {
console.log("ajax通信に失敗しました");
//失敗した時の処理
},
success : function(response) {
console.log("ajax通信に成功しました");
//成功した時の処理
}
})
//取得
var name = $("#name").text();
name = username.replace(/\s+/g, "");
$.getJSON("data.json", function(data){
if(data['name'] == name){
console.log("成功");
}else{
console.log("失敗");
}
getJSON関数は第一引数に取得するデータのURL、第二引数に取得後の処理をfunction(data)の中に書きます。取得したデータはdataに入っています。デコードは不要です。
$.getJSON("JSONのURL",function("取得したデータを入れる変数名"){処理})
これで完了です！
#最後に
二つのことを一気にやってみましたが、それぞれいろいろなところに利用できると思います！
それにしてもPHPとjQueryは便利すぎですね。
最後までありがとうございました。