PHPの処理を走らせる際、基本的にはページ画面を更新しないといけません。
でも、例えばTwitterのようなSNSサービスを作成して、
「いいね」ボタンを押すたびにページが更新されるのはちょっと鬱陶しいですよね。
ページを更新せずにPHPの処理を走らせることはできないのでしょうか。
Ajax通信を使う
その解決策の答えは、Javascript側でAjax通信を使うことです。
例えば、Twitterのような「いいね」機能を実装したい場合、
以下のようなHTML、Javascriptのコードを書きます。
// csrf対策
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
：
<li class="js-favoriteButton" data-message_id="{{ $message->id }}">いいね</div>
：<script>
$(function() {
$('.js-favoriteButton').click(function() {
// いいねしたメッセージのidを取得する
var id = $(this).data('message_id');
// Ajax通信
$.ajax({
headers: {
// csrf対策
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: '/favorite/' + id, // アクセスするURL
type: 'GET', // POSTかGETか
id: id, // わからん
success: function() {
//通信が成功した場合の処理をここに書く
},
error: function() {
//通信が失敗した場合の処理をここに書く
}
});
});
});
</script>一方、web.phpは以下のように書き換えます。
Route::get('/favorite/{message_id}', 'snsController@favoriteAction');これで、いいねを押した際、ページを更新することなく、
snsController.phpファイル内のfavoriteActionメソッドを走らせることができます。
あとは大丈夫かと思いますが、favoriteActionメソッドは以下のように書けばいいです。
public function favoriteAction($message_id)
{
// DBに保存する処理
}これらは、非同期通信と呼ぶみたいです。
Ajax通信について、ちょっとだけ詳しく調べてみた
Ajaxとは、「Asynchronous JavaScript + XML」の略です。
「Asynchronous」とは、日本語に訳すと「非同期」と呼びます。
なので、Ajaxのことを「非同期通信」と呼ぶこともあります。
非同期通信を行うことで、わざわざページをリロードすることなく、
URLなどにアクセスすることができます。
つまり、PHPなどの処理を走らせることができます。
Ajaxの基本形
まず、Ajaxの基本形を見てみましょう。
$.ajax({
url: 'data.json', //アクセスするファイルまたはURL
dataType: 'json', // データを受け取る形式(xml、json、GET、POSTなど)
}).done(function(event) {
// データがダウンロードできたときの処理
}).fail(function(event) {
// データのダウンロードに失敗したときの処理
});このajaxの基本形を利用すれば、以下のように、
今開いているページを更新することなく好きなURLにアクセスし、
PHPを走らせることができます。
var message_id = $(this).data('message_id');
$.ajax({
url: '/favorite/' + message_id,
dataType: 'GET',
}).done(function(event) {
console.log('URLにアクセス成功');
}).fail(function(event) {
console.log('URLにアクセス失敗')
});Jsonファイルを読み込んでみよう
逆に、Ajaxを使ってデータを受け取ることもできます。
例えば、以下のようなjsonファイル「user.json」を用意します。
{
"name": "じゃゔぁさん",
"old": "28",
"from": "北海道"
}ajax(html)は以下のように書きます。「index.html」
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsonPractice</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
$.ajax({
type: 'GET',
url: 'user.json',
dataType: 'json',
}).done(function (data) {
console.log(data);
}).fail(function (data) {
console.log('データ読み込み失敗');
});
});
</script>
</body>
</html>ディレクトリ構造は、シンプルに以下の通りです。
適当なフォルダ
├── index.html
└── user.jsonchromeのコンソールを開くと、、
index.html:40 データ読み込み失敗なんで？エラーが。。
どうやら、ローカルではなくサーバー上でコンソールを開かないと、
ajaxの結果は見れないらしい。。
なので、対象ファイルがあるディレクトリで、以下のコマンドを実行し、
簡易サーバーを立ち上げる。
(http-serverのインストール)
$ npm install -g http-server
(サーバーの起動)
$ http-serverこれで、http://127.0.0.1:8080/ にアクセスし、コンソール画面を開くと、
(index):16 {name: "じゃゔぁさん", old: "28", from: "北海道"}無事、取得したjsonデータを表示することができた
コメント