[Laravel]画面を更新しないでDBにデータを保存したい

未分類

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.json

chromeのコンソールを開くと、、

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データを表示することができた

参考

コメント

タイトルとURLをコピーしました