私はjqueryでajaxリクエストを行っており、サーバーに1つのデータ(クリックされたボタンのID)を送信したいので、正しいクエリを作成して正しい応答を返すことができます。私が考えているのは、ボタンをクリックした後、ajax呼び出しを行ってデータテーブルを要求するということです。私のjquery関数は次のようになります。
$('button').click(function(){
var dep_id = $(this).attr('id');
var table = $('#dataTable').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url" : '{!! route('workerDepData') !!}' ,
"type" : "POST" ,
"data" : { id: dep_id }
},
columns: [
{ data: 'id', name: 'id' },
{ data: 'worker_name' , name:'name' },
{ data: 'role', name: 'role' },
{ data: 'dep_name' , name:'dep_id'} ,
{ data: 'created_at', name: 'created_at' } ,
{
"className": "details",
"orderable": false,
"data": null,
"defaultContent": '<button class="btn btn-success" id="show">Show</button>' }
]
} );
私のルートは以下のようなものです:
Route::post('/dep/fetch/workers' , 'DepsController@fetch_workers')->name('workerDepData');
コントローラー内のfetch_workers関数には次のコードがあります。
public function fetch_workers()
{
$workers = DB::table('workers')
->where('workers.dep_id' , '=' ,request('id'))
->join('departaments' , 'workers.dep_id' , '=' , 'departaments.id')
->select('workers.id' , 'workers.name as worker_name' , 'workers.role' , 'departaments.name as dep_name' , 'workers.created_at')
->get();
$ajaxResponse = Datatables::of($workers)->make(true);
return $ajaxResponse;
}
ボタンをクリックするとエラーが発生し、ajaxリクエストによるサーバーからの応答を確認すると、jsonファイルに次の例外があります。
Symfony\Component\HttpKernel\Exception\HttpException。
この種の例外を確認しましたが、postの代わりにgetを使用するルートが原因であることがわかりました。あなたが見ることができる私のルートはポストを使用しているので、なぜこの例外なのか理解できません。
コメントで述べたように。その[〜#〜] csrf [〜#〜]トークンの発行。
それを修正するために
1)CSRFのURIを除外できます
2)csrf_token()をajaxリクエストに追加できます。
詳細な説明はここにあります https://laravel.com/docs/5.5/csrf
CSRFトークンをブレード形式とpostメソッドの両方に含める必要があります。
var _token = $("input[name='_token']").val();
他のデータと一緒に渡します。
data: { _token:_token , etc:etc },
楽しむ :)
すべての最新の5.6より上のバージョンでは、次のように使用できます
<form method="POST" action="YOUR_ACTION">
@csrf
...
</form>
Laravel:laravelでajaxのcsrf問題に直面している人向け
<?php
if(condition){
$updated_field = 'User' ;
$id = $t->updated_value;
echo '<script type="text/javascript">';
echo '$(document).ready(function(){
var updated_value ='. $id .';
//alert(updated_value);
$.ajaxSetup({
headers : { "X-CSRF-TOKEN" :jQuery(`meta[name="csrf-token"]`). attr("content")}
});
$.ajax({
type:"POST",
url : "get_username",
data : { id: id },
success: function(){
console.log(data);
}
});
});';
echo '</script>';
}
?>