【Laravel】ajax通信を通して値をコントローラーで扱いたいです。

前提・実現したいこと

質問を見ていただきありがとうございます。
Laravelで写真の順番を並び替え、非同期でDBに保存する機能を作っています。
ajax通信を通して値をコントローラーで扱いたいのですがうまく取得ができません。
正しい方法がわかる方がいれば教えていただきたいです。
過去の質問などを参考に色々と試してみましたが、自分ではどうしても解決できず質問させていただきました。
よろしくお願いいたします。

該当のソースコード

blade.php

php
1<ul id="sortable">
2	@foreach($pictures as $picture)
3	<li id="{{$picture->id}}">
4		<img src="{{ asset('storage/picture/' . $picture->picture) }}"/>
5	</li>
6	@endforeach
7</ul>

web.php

php
1Route::post('/mypage/picture/sort', 'LoginPagesController@sortPicture');

javascript.js

JS
1$(function () {
2  $('#sortable').sortable({
3    stop: function () {
4      var result = $("#sortable").sortable("toArray");
5      console.log(result);
6      $.ajax({
7        url: location.origin + '/mypage/picture/sort',
8        type: 'POST',
9        dataType: 'json',
10        data: {
11          result: result
12        },
13        　headers: {　
14          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
15        },
16        success: function (json) {
17          console.log('success');
18          console.log(json['responseData']);
19          console.log(json['request']);
20        },
21        error: function (XMLHttpRequest, textStatus, errorThrown) {
22          console.log('error');
23          console.log(XMLHttpRequest.status);
24          console.log(textStatus);
25          console.log(errorThrown);
26        },
27      });
28    }
29  });
30});

Controller.php

php
1public function sortPicture(Request $request){
2  $result = $request->result;
3  $result_array = explode(',', $result);
4  $number = 1;
5  foreach ($result_array as $value) {
6    $picture = Picture::where('id', '=', $value)->first();
7    $picture->number = $number;
8    $picture->save();
9    $number++;
10  }
11  return response()->json([
12  'responseData' =>  $result,
13  'request' =>  $request,
14  ]);
15}

試したこと

ajax関連のタグを追加したり、コンソールログを確認してsucseccになるところまではできましたがどうしても値をコントローラーに渡すことができません。

console.log(result);

何も表示されていない状態です。
ここに値がでるように色々試してみたのですがうまくいきません…。

console.log(request);は下記の内容が表示されます。

POST /mypage/picture/sort HTTP/1.1
Accept: application/json, text/javascript, /; q=0.01
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 57
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Cookie: remember_admin_59ba36addc2b2f9401580f014c7f58ea4e30989d=eyJpdiI6IkdWRjd4U2ZtUEF5cnRWcGtHa2xpNnc9PSIsInZhbHVlIjoiRDBUblcrRG91dU03Vm12TzJ2VzQxUHJpbDN6Qm1UVSt6dTVmVUxWYjNcL3JRTnZpeWprNXlzWHRJdWhIKzVFWkxjOEhManpYcG1GeFwvMVdlQ1A5RThndzRENXlwaWJaYmF0THpKVUdWZDhLNjM1cUNPV1lhM3gyVTdYdlB5VFJYcDZmOGQrUjduV09DWnNVVVQrVm0yNEZBMFZVSFErcmRsMmhjTWtWcWcrMU09IiwibWFjIjoiYjA4NTBiODE4OWJlOGUyZTI4YzZlZTYyNzBkMGVmYjM1NDYwZTcxMGVkOWVjNjBjZDY2NmU3YjA4YzY1ZmZjMiJ9; remember_web_59ba36addc2b2f9401580f014c7f58ea4e30989d=eyJpdiI6IktudTJ6VHcya1ZRaWtsOUdHWXhcL29RPT0iLCJ2YWx1ZSI6Im44MzFMRzlOUEVXbzVreFwvajdMK0NEd1lESDBEREZkUndCcmxZbm5SbEsrZUNBRnF2S2FUN2dkazdJNjg4SDJwY0F0XC9SUkx0ZTVveVQwSnBuTURCZnJ6TVYrZ3J5WmVGTWNxcmNubk1WYXJHWmVcLzVvNjlnR05Ud2phWVV2UE5DWGF3OENKMkdRQnVWUWZrVGNBczlBTUNVU04xZzJ6YUNCRXgwUmRiZWtJQT0iLCJtYWMiOiIwZThjZGZiYzFkMmIxNDFkMjdjZDk2NzY2NGY4NmY2MGUzZmJlOWNlMTM2YmI5MWY5YmFiMjUxYWIzMGMwYzAwIn0%3D; XSRF-TOKEN=eyJpdiI6Ik9vYWZkcXkrN1UyTW1qOUdqTVpoWlE9PSIsInZhbHVlIjoiTktPb3Q3VmJnXC9GcWhLYTk3dVNCQnhWUGZYREhHVDcwWGhCaDdxc0FwZmpLcWI5bUNPdkNqN08rMXJYRXJDeWUiLCJtYWMiOiJkNTU1ZTcyOWNjNzhlODJkY2JjNzJmYTYzMzM4ZmI5ZmFjYjYwMWQwYzIzMjMxNzNjMjRhNzEyMzhkMDdjYWU4In0%3D; laravel_session=eyJpdiI6IkE5OUhEZllxM1NxVTQzbGE1VVpTdEE9PSIsInZhbHVlIjoidERUdVNzSzVHcGZmaFlETDdWQWZhUm1NZWo1Mk9BVTdicGIwYkNQeVZCZXpXS012K2NsaUhBb3FFXC9ocEVxekciLCJtYWMiOiI3ZmQzZjQ2NTIwOTk2YzI1MTgxY2EzYzViNDQxMGU3MjQyNzkzMDA2YjI4NTMzY2JlMzIwZGFkNDJjM2U1MDQzIn0%3D
Host: 127.0.0.1:8000
Origin: http://127.0.0.1:8000
Pragma: no-cache
Referer: http://127.0.0.1:8000/mypage/picture
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36
X-Csrf-Token: 11O0rS5Ly5xOlshcBfvHlPGVAJ6CyvKPFAFCRpEv
X-Requested-With: XMLHttpRequest
Cookie: remember_admin_59ba36addc2b2f9401580f014c7f58ea4e30989d=; remember_web_59ba36addc2b2f9401580f014c7f58ea4e30989d=2|7PaRuYqxn3VXAthgdNcIurv76Dae9xm6M8RSCgBzWbohTyJ5qAiyVhukuXaU|$2y$10$85MWkGDlw4c.ZbvvoOZwUOCLV/Mf/bEytuRqPplZPDhENLXZp.AMe; XSRF-TOKEN=11O0rS5Ly5xOlshcBfvHlPGVAJ6CyvKPFAFCRpEv; laravel_session=cxL8lG2R0CuOZrnFwWdiRVT9px7FDVUXsVIP7enF

{"result":["12","10","11","13","14","15","16","17","18"]}

補足情報（FW/ツールのバージョンなど）

Laravel 6.14.0
jquery　3.3.1
jqueryui 1.12.1

m.ts10806

2020/05/02 15:08

>console.log(result); これの結果はどうなってますか？

退会済みユーザー

2020/05/02 15:24 編集

お返事いただきありがとうございます。 >console.log(result); 何も表示されていない状態です。ここに値がでるように色々試してみたのですがうまくいきません…。 >console.log(request);は下記の内容が表示されます。 POST /mypage/picture/sort HTTP/1.1 Accept: application/json, text/javascript, */*; q=0.01 Accept-Encoding: gzip, deflate, br Accept-Language: ja,en-US;q=0.9,en;q=0.8 Cache-Control: no-cache Connection: keep-alive Content-Length: 57 Content-Type: application/x-www-form-urlencoded; charset=UTF-8 Cookie: remember_admin_59ba36addc2b2f9401580f014c7f58ea4e30989d=eyJpdiI6IkdWRjd4U2ZtUEF5cnRWcGtHa2xpNnc9PSIsInZhbHVlIjoiRDBUblcrRG91dU03Vm12TzJ2VzQxUHJpbDN6Qm1UVSt6dTVmVUxWYjNcL3JRTnZpeWprNXlzWHRJdWhIKzVFWkxjOEhManpYcG1GeFwvMVdlQ1A5RThndzRENXlwaWJaYmF0THpKVUdWZDhLNjM1cUNPV1lhM3gyVTdYdlB5VFJYcDZmOGQrUjduV09DWnNVVVQrVm0yNEZBMFZVSFErcmRsMmhjTWtWcWcrMU09IiwibWFjIjoiYjA4NTBiODE4OWJlOGUyZTI4YzZlZTYyNzBkMGVmYjM1NDYwZTcxMGVkOWVjNjBjZDY2NmU3YjA4YzY1ZmZjMiJ9; remember_web_59ba36addc2b2f9401580f014c7f58ea4e30989d=eyJpdiI6IktudTJ6VHcya1ZRaWtsOUdHWXhcL29RPT0iLCJ2YWx1ZSI6Im44MzFMRzlOUEVXbzVreFwvajdMK0NEd1lESDBEREZkUndCcmxZbm5SbEsrZUNBRnF2S2FUN2dkazdJNjg4SDJwY0F0XC9SUkx0ZTVveVQwSnBuTURCZnJ6TVYrZ3J5WmVGTWNxcmNubk1WYXJHWmVcLzVvNjlnR05Ud2phWVV2UE5DWGF3OENKMkdRQnVWUWZrVGNBczlBTUNVU04xZzJ6YUNCRXgwUmRiZWtJQT0iLCJtYWMiOiIwZThjZGZiYzFkMmIxNDFkMjdjZDk2NzY2NGY4NmY2MGUzZmJlOWNlMTM2YmI5MWY5YmFiMjUxYWIzMGMwYzAwIn0%3D; XSRF-TOKEN=eyJpdiI6Ik9vYWZkcXkrN1UyTW1qOUdqTVpoWlE9PSIsInZhbHVlIjoiTktPb3Q3VmJnXC9GcWhLYTk3dVNCQnhWUGZYREhHVDcwWGhCaDdxc0FwZmpLcWI5bUNPdkNqN08rMXJYRXJDeWUiLCJtYWMiOiJkNTU1ZTcyOWNjNzhlODJkY2JjNzJmYTYzMzM4ZmI5ZmFjYjYwMWQwYzIzMjMxNzNjMjRhNzEyMzhkMDdjYWU4In0%3D; laravel_session=eyJpdiI6IkE5OUhEZllxM1NxVTQzbGE1VVpTdEE9PSIsInZhbHVlIjoidERUdVNzSzVHcGZmaFlETDdWQWZhUm1NZWo1Mk9BVTdicGIwYkNQeVZCZXpXS012K2NsaUhBb3FFXC9ocEVxekciLCJtYWMiOiI3ZmQzZjQ2NTIwOTk2YzI1MTgxY2EzYzViNDQxMGU3MjQyNzkzMDA2YjI4NTMzY2JlMzIwZGFkNDJjM2U1MDQzIn0%3D Host: 127.0.0.1:8000 Origin: http://127.0.0.1:8000 Pragma: no-cache Referer: http://127.0.0.1:8000/mypage/picture Sec-Fetch-Dest: empty Sec-Fetch-Mode: cors Sec-Fetch-Site: same-origin User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36 X-Csrf-Token: 11O0rS5Ly5xOlshcBfvHlPGVAJ6CyvKPFAFCRpEv X-Requested-With: XMLHttpRequest Cookie: remember_admin_59ba36addc2b2f9401580f014c7f58ea4e30989d=; remember_web_59ba36addc2b2f9401580f014c7f58ea4e30989d=2|7PaRuYqxn3VXAthgdNcIurv76Dae9xm6M8RSCgBzWbohTyJ5qAiyVhukuXaU|$2y$10$85MWkGDlw4c.ZbvvoOZwUOCLV/Mf/bEytuRqPplZPDhENLXZp.AMe; XSRF-TOKEN=11O0rS5Ly5xOlshcBfvHlPGVAJ6CyvKPFAFCRpEv; laravel_session=cxL8lG2R0CuOZrnFwWdiRVT9px7FDVUXsVIP7enF {"result":["12","10","11","13","14","15","16","17","18"]}

m.ts10806

2020/05/02 23:20

質問は編集できます。原則本文に追記してください。あと、提示されたコードにはconsole.log(request)はどこにも書かれていないようですけど・・ resultが何も出ないということは、$("#sortable").sortable("toArray")から何も取れてない＝サーバー側に何も届いてない（もしくはNULL）ということになるので、処理は正しくされないと思います。

退会済みユーザー

2020/05/03 02:18

ご指摘ありがとうございます。質問内容を編集しました。 console.log(request);の一番最後の行に、扱いたい値が入っていて、 {"result":["12","10","11","13","14","15","16","17","18"]} こちらを取得したいのですがその方法がもしわかればご教示いただければ幸いです。なんどもすみません、よろしくお願いします。