#制作環境

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を開き、以下のように記述してください。

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を開き、以下のように記述します。

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送信はできません。

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="">a要素でPOST送信</a>
    </div>
    <form id="a-post" action="{{ route('aposted') }}" method="post" style="display: none">
        @csrf
    </form>
</body>
</html>

/apostにアクセスし表示を確認すると、下のような文字だけのリンクが表示されます。

次にaposted.blade.phpを開き、以下のように記述します。

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タグの内容を以下のように修正してください。

apost.blade.php

<a href="javascript:document.getElementById('a-post').submit()">a要素でPOST送信</a>

修正が完了したら、/apostにアクセスし動作を確認してください。

「a要素でPOST送信」をクリック後、

「送信に成功しました!」と表示されたらOKです。

#jQueryでPOST送信する

jQueryを使用し、POST送信を実装します。
やり方はJavaScriptと一緒です。

apost.blade.phpを開き、aタグの内容を以下のように修正してください。

apost.blade.php

<a href="javascript:$('#a-post').submit()">a要素でPOST送信</a>

修正しただけでは機能しません。
jQueryが使えるようにしないといけません。

##方法① CDNを利用

jQueryを使うのにCDNを利用します。
apost.blade.phpの<head>内に以下を記述してください。
※<body>終了タグ直前でもいいです。

apost.blade.php

<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>終了タグの直前に以下を記述してください。

apost.blade.php

    <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を開き、内容を以下のように修正してください。

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タグの内容を以下のように修正してください。

apost.blade.php

<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を開き、以下のように修正してください。

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');の下に以下を追記します。

app.js

require('./apost');

記述し終えたら、先ほど作成したapost.jsファイルを開き、以下のように記述してください。

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の記述はコメントアウトするか、削除してください。

apost.js

$(function() {
    $('.a-submit').click(function() {
        $('#a-post').submit();
    });
});

記述が完了したら、ターミナルで以下を実行してください。

npm run dev

処理が完了したら、/apostにアクセスし動作を確認してください。

##③nameを指定しJavaScriptを使用

apost.blade.phpを開き、以下のように修正してください。

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以下のように修正します。
※必要のない記述はコメントアウトするか、削除してください。

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の記述はコメントアウトするか、削除してください。

apost.js

$(function() {
    $('a[name="asubmit"]').click(function() {
        $('form[name="apost"]').submit();
    });
});

#まとめ

aタグに直接処理を書くなら、jQueryでnameを指定する方が記述が少なくてすむ。
複数ページで同じ事をやるなら、使用したい箇所で同じidやclassを指定するだけで済むLaravel-mixの方が便利。