サンプル
コード
ルーティング処理
\routes\web.php
// 表示するメイン画面
Route::get('/splite_blade/','SpliteBlade\SpliteBladeController@index')->name('splite_blade.index');
// フォームの内容を受け取って、処理をして返す
Route::post('/splite_blade/ajax/','SpliteBlade\SpliteBladeController@ajax')->name('splite_blade.ajax');
コントローラー
\app\Http\Controllers\SpliteBlade\SpliteBladeController.php
<?php
namespace App\Http\Controllers\SpliteBlade;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
class SpliteBladeController extends Controller
{
// 入力画面を表示する処理
public function index()
{
return view('/splite_blade/index');
}
// ajaxを利用して受け取った値を処理して返す
public function ajax(Request $request)
{
// 受け取った値の処理
$ajax_form = "入力された値は".$request->input('ajax_input')."です。";
// ajaxで受け取ってviewを表示できるようにレンダリング
return response()->json([
'form' => view('/splite_blade/ajax')->with(['input_data' => $ajax_form])->render()
]);
}
}
View
\resources\views\splite_blade\index(.blade).php
<script
src="https://code.jquery.com/jquery-3.6.1.js"
integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
crossorigin="anonymous"></script>
<script>
$(function(){
$('#ajax_submit').on('click', function(){
// 入力する値の取得
var input_value = document.getElementById('ajax_input');
$.ajax({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, // CSRFトークンの設定
url: "{{ route('splite_blade.ajax') }}",
type: 'POST',
data: {"ajax_input" : input_value.value},
})
.done(function(data){
// 通信に成功したら、指定したIDにhtmlデータを挿入
$('#ajax_result').html(data['form']);
})
.fail(function(){
alert('error');
})
});
});
</script>
<div>
<div>ajaxで渡すデータを入力する</div>
<div>
<h2>入力画面</h2>
<div>
<input id="ajax_input" name="ajax_form" type="text">
<button id="ajax_submit" type="submit">送信する</button>
</div>
</div>
<div id="ajax_result"></div>
</div>
</div>
\resources\views\splite_blade\ajax(.blade).php
<div>{{ $input_data }}</div>