Help us understand the problem. What is going on with this article?

PHP×jQuery(JS)×JSONでデータの送受信

More than 1 year has passed since last update.

はじめに

最近PHPの便利さに気づいた僕です。
サーバー側のプログラミングは初めてだったけど思ったほど難しくなかったです。

では、そのPHPとJSでデータを共有させて見たいと思います!
今回はJSの中でもjQueryを使います。

JSのデータを保存する方法と
PHPとJSでデータを共有する方法を一気にやります!

流れ

  1. JSでデータを作ってjQueryのajax通信でPHPに送信
  2. PHPで送られてきたJSONデータをファイルに保存
  3. PHPからJSにデータを共有
  4. JSでJSONファイルを取得してPHPからのデータと照合

準備

先にJSONファイルの作成とjQueryのダウンロード等をしましょう。
今回作るファイル
- index.php
- script.js
- save.php
- data.json
index.phpにscript.jsとjQueryを入れときましょう。

JSONデータを作る

まずはJSで送信するJSONを作成して、
ajax通信でPHPにデータを送ります。

script.js
//送信するオブジェクトを作る
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を書きます

save.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にコードを追加しましょう。

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に表示

save.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でデータの取り出し

script.js
var name = $("#name").text();
name = username.replace(/\s+/g, "");

前に書いた部分は一旦省略です。
HTMLの中身はjQueryを使って.text()で簡単に取り出せます。jQueryすごい。
さてここで注意
(理由は全くわかりませんが!)大量のスペースが取り出した時に入ってますなぜか。なのでreplaceを使って全部取り除きましょう!
誰か理由わかれば教えてください...

これでPHPからのデータを取り出せましたね!

JSでJSONファイルを取得してPHPからのデータと照合

さて最後です。
PHPで保存したJSONファイルを取得して、PHPからのデータと照らし合わせて見ましょう。

script.js
//送信するオブジェクトを作る
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は便利すぎですね。

最後までありがとうございました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした