Laravel5.4でAjaxのサンプル
■web.php
<?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');
■コントローラ
<?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(マスター。親。)
<!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
@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 件のコメント:
コメントを投稿