#制作環境
Windows 10
Laravel : 6.18.35
Laravel/ui : 1.0
Laravel-mix : 5.0.1
jQuery : 3.2
Bootstrap : 4.0.0
MDBootstrap : 4.19.1
chart.js : 2.9.3
XAMPP
PHP : 7.4.3
Visual Studio Code
#はじめに
この記事はプログラミングをはじめたばかりの素人が、できたことをメモするのに利用しています。
内容には誤りがあるかもしれません。
機能の確認のみに特化しているので、必要最低限の記述しかしていません。
#コントローラの作成
Laravelのプロジェクトのディレクトリでターミナルを起動し、以下を実行してください。
php artisan make:controller PostController
処理が完了したら、作成されたPostController.phpを開き、以下のように記述してください。
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PostController extends Controller
{
public function index()
{
return view('apost');
}
public function post()
{
return view('aposted');
}
}
シンプルに、POST送信前に表示するページとPOST送信後に表示するページの２つの処理を記述しています。
#ルーティングの作成
routes 内のweb.phpを開き、以下のように記述します。
Route::get('/apost', 'PostController@index')->name('apost');
Route::post('/apost', 'PostController@post')->name('aposted');
->name()とすることで、ルーティングに名前を付けています。
#ビューの作成
resources>views 内にapost.blade.php とaposted.blade.phpの２つのファイルを作成します。
apost.blade.phpが送信前のページで、aposted.blade.phpが送信後のページです。
apost.blade.phpを開き、以下のように記述します。
※現時点でPOST送信はできません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>a要素でPOST</title>
</head>
<body>
<div>
<a href="">a要素でPOST送信</a>
</div>
<form id="a-post" action="{{ route('aposted') }}" method="post" style="display: none">
@csrf
</form>
</body>
</html>
/apostにアクセスし表示を確認すると、下のような文字だけのリンクが表示されます。
次にaposted.blade.phpを開き、以下のように記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>a要素でPOST後</title>
</head>
<body>
<p>送信に成功しました!</p>
<a href="{{ route('apost') }}">戻る</a>
</body>
</html>
「送信に成功しました」の文字と、「戻る」のリンクがあるだけです。
#JavaScriptでPOST送信する
JavaScriptを使用し、POST送信を実装します。
やり方としては、JavaScriptで<form id="a-post">の要素を取得し、submitさせます。
apost.blade.phpを開き、aタグの内容を以下のように修正してください。
<a href="javascript:document.getElementById('a-post').submit()">a要素でPOST送信</a>
修正が完了したら、/apostにアクセスし動作を確認してください。
「a要素でPOST送信」をクリック後、
「送信に成功しました!」と表示されたらOKです。
#jQueryでPOST送信する
jQueryを使用し、POST送信を実装します。
やり方はJavaScriptと一緒です。
apost.blade.phpを開き、aタグの内容を以下のように修正してください。
<a href="javascript:$('#a-post').submit()">a要素でPOST送信</a>
修正しただけでは機能しません。
jQueryが使えるようにしないといけません。
##方法① CDNを利用
jQueryを使うのにCDNを利用します。
apost.blade.phpの<head>内に以下を記述してください。
※<body>終了タグ直前でもいいです。
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
これで動作するようになります。
##方法② Laravel-mixを使用
npmで既にjQueryがインストールされているようであれば、以下の記述でjQueryが使えるようになります。
apost.blade.phpの<body>終了タグの直前に以下を記述してください。
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
記述が完了したらターミナルで以下を実行してください。
npm run dev
修正とjQueryを使えるようにしたら、/apostにアクセスし動作を確認してください。
JavaScriptの時と同じであればOKです。
#nameを使用しての記述
ここまでは<form>にidを設定し、idを指定して要素を取得しました。
今度は<form>にnameを設定し、動作するようにしてみます。
#nameを指定しJavaScriptでPOST送信する
apost.blade.phpを開き、内容を以下のように修正してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>a要素でPOST</title>
</head>
<body>
<div>
<a href="javascript:document.apost.submit()">a要素でPOST送信</a>
</div>
<form name="apost" action="{{ route('aposted') }}" method="post" style="display: none">
@csrf
</form>
</body>
</html>
getElementByIdがないので、ちょっとスッキリします。
/apostにアクセスし動作を確認してください。
★ポイント★
a-postのように「-」が入るとうまくいかないため、名前をapostに変更してます。
#nameを指定しjQueryでPOST送信する
apost.blade.phpを開き、aタグの内容を以下のように修正してください。
<a href="javascript:apost.submit()">a要素でPOST送信</a>
【注意事項】
このままでは動作しません。必ずjQueryを使えるようにしてください。
/apostにアクセスし動作を確認してください。
#Laravel-mixでPOST送信する
今度はLaravel-mixを使用してPOST送信してみたいと思います。
※今回はLaravel-mixを使用するので、jQueryもLaravel-mixを使用します。
##①JavaScriptを使用
apost.blade.phpを開き、以下のように修正してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>a要素でPOST</title>
</head>
<body>
<div>
<a class="a-submit" href="#">a要素でPOST送信</a>
</div>
<form id="a-post" action="{{ route('aposted') }}" method="post" style="display: none">
@csrf
</form>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
次にresources>js 内に新しくapost.jsファイルを作成してください。
作成したら次にresources>js 内にあるapp.jsを開き、require('./bootstrap');の下に以下を追記します。
require('./apost');
記述し終えたら、先ほど作成したapost.jsファイルを開き、以下のように記述してください。
document.getElementsByClassName('a-submit')[0].addEventListener('click', function() {
document.getElementById('a-post').submit();
}, false);
記述が完了したら、ターミナルで以下を実行してください。
npm run dev
処理が完了したら、/apostにアクセスし動作を確認してください。
##②jQueryを使用
ビューの記述、app.jsの記述はJavaScriptと一緒です。
apost.jsファイルのみ修正します。
※JavaScriptの記述はコメントアウトするか、削除してください。
$(function() {
$('.a-submit').click(function() {
$('#a-post').submit();
});
});
記述が完了したら、ターミナルで以下を実行してください。
npm run dev
処理が完了したら、/apostにアクセスし動作を確認してください。
##③nameを指定しJavaScriptを使用
apost.blade.phpを開き、以下のように修正してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>a要素でPOST</title>
</head>
<body>
<div>
<a name="asubmit" href="#">a要素でPOST送信</a>
</div>
<form name="apost" action="{{ route('aposted') }}" method="post" style="display: none">
@csrf
</form>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
次にapost.js以下のように修正します。
※必要のない記述はコメントアウトするか、削除してください。
document.getElementsByName('asubmit')[0].addEventListener('click', function() {
document.getElementsByName('apost')[0].submit();
}, false);
記述が完了したら、ターミナルで以下を実行してください。
npm run dev
処理が完了したら、/apostにアクセスし動作を確認してください。
##④nameを指定しjQueryを使用
ビューの記述、app.jsの記述はJavaScriptと一緒です。
apost.jsファイルのみ修正します。
※JavaScriptの記述はコメントアウトするか、削除してください。
$(function() {
$('a[name="asubmit"]').click(function() {
$('form[name="apost"]').submit();
});
});
#まとめ
aタグに直接処理を書くなら、jQueryでnameを指定する方が記述が少なくてすむ。
複数ページで同じ事をやるなら、使用したい箇所で同じidやclassを指定するだけで済むLaravel-mixの方が便利。