2017年7月7日金曜日

Laravel5.4でAjax

(2017/07/07)
Laravel5.4でAjaxのサンプル

■web.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
Route::get('/', function () {
    return view('welcome');
});
 
// Viewを指定するパターン
Route::get('test', function () {
    //return view('test');
              return view('test', ['name' => 'Viewを指定']);
});
 
// 直接文字列を返すパターン
Route::get('helloworld', function () {
    return 'HelloWorld';
});
 
// Controller使用するパターン
Route::get('user/{id}', 'TestController@show');
 
// Ajax(とりあえず簡単なGetでお試し)
Route::get('ajaxTest', 'TestController@ajax');

■コントローラ
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?php
 
namespace App\Http\Controllers;
 
use App\Http\Controllers\Controller;
use DB;
 
 
class TestController extends Controller
{
 
    /**
     * 指定ユーザのプロフィール表示
     *
     * @param  int  $id
     * @return Response
     */
    public function show($id)
    {
        // 下記はMariaDBへの接続サンプル
        //$table1 = DB::table('table1')->where('id', 2)->first();
        //$result = $this->addText($id) . $table1->value;
 
        return view('test', ['name' => $id]);
    }
 
    /**
     * Ajax通信のサンプル
     * @return [type] [description]
     */
    public function ajax()
    {
 
        // 簡単にやるなら配列返すのでもOK
        // return ["data" => "Ajax success"];
 
        return response()->json(
                    ['data' => 'Ajax success'],
                    200,[],
                    JSON_UNESCAPED_UNICODE
                );
    }
 
    /**
     * ローカルメソッドのサンプル
     * @param [type] $val [description]
     */
    private function addText($val)
    {
        $val2 = '';
        return $val . '-add string-';
    }
 
 
}

■blade(マスター。親。)
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE HTML>
<html lang="ja">
<html>
    <head>
        <meta charset="UTF-8">
        <title>アプリ名 - @yield('title')</title>
        <!-- CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <style type="text/css">
        <!--
            hr {
                border: 0;
                border-bottom: 1px dashed #ccc;
                background: #999;
            }
            @yield('css')
        -->
        </style>
        <!-- Scripts -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script type="text/javascript">
        <!--
            @yield('js')
        -->
        </script>
    </head>
    <body>
        @section('header')
            <hr>
            ここがメインのヘッダ
            <hr>
        @show
  
        <div class="container">
            @yield('content')
        </div>
  
        @section('footer')
            <hr>
            ここがメインのフッター
        @show
    </body>
</html>

■継承したコンテンツ用blade
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
@extends('layouts.app')
 
@section('title', 'これがサブのタイトルになります')
 
@section('css')
@endsection
 
@section('js')
$(function() {
    $("#button_a").on("click", function() {
        alert("aaaaaaaaa");
    });
 
    $("#button_b").on("click", function() {
        $.ajax(
            '../ajaxTest',
            {
                type: 'get',
                data: { 'no': 'aaaaaaaa' },
                dataType: 'json'
            }
        )
        // 検索成功時にはページに結果を反映
        .done(function(data) {
            alert(data.data);
        })
        // 検索失敗時には、その旨をダイアログ表示
        .fail(function() {
            window.alert('正しい結果を得られませんでした。');
        });
    });
});
@endsection
 
@section('header')
    @parent
    <p>ここはサブのヘッダ</p>
    <hr>
@endsection
 
@section('content')
    <p>ここが本文のコンテンツ</p>
    @for($i = 1; $i <= 10; $i++)
        <p>Hello, {{$name}}</p>
    @endfor
    <p>
        <a id="button_a" class="btn btn-lg btn-success" href="#" role="button">Push</a>
        <a id="button_b" class="btn btn-lg btn-info" href="#" role="button">Push</a>
    </p>
 
@endsection
 
@section('footer')
    @parent
@endsection
投稿者 時刻:
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)