jQueryでpostしphpへ値を渡す

https://brainlog.jp/programming/javascript/post-530/

上記のサイトを参考にコード書いてみましたが、jqueryからphpへ値を渡すことができずエラーが返ってきてしまいます。何が原因であるか教えていただければ幸いです。

使用フレームワーク8.42.1

php
1//test.blade.php
2
3<!DOCTYPE html>
4<html lang="ja">
5<head>
6<meta charset="UTF-8">
7    <meta http-equiv="X-UA-Compatible" content="IE=edge">
8    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9    <meta name="csrf-token" content="{{ csrf_token() }}">
10    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
11</head>                    
12<body>
13<?PHP
14header('Content-type: application/json; charset=utf-8'); 
15$data = filter_input(INPUT_POST, 'データ');
16
17$param = $data;
18
19echo json_encode($param);
20?>
21<button class="hoge-button">ボタン</button>
22script src="{{ mix('js/test.js') }}"></script>
23</body>
24</html>

jQuery
1//test.js
2
3$(function () {
4
5  $('.search-criteria-button').click(function () {
6       const data ="Hello";
7
8      $.ajax({
9        type: "POST", //　GETでも可
10        url: "test", //　送り先
11        data: { 'データ': data }, //　渡したいデータをオブジェクトで渡す
12        dataType : "json", //　データ形式を指定
13        scriptCharset: 'utf-8', //　文字コードを指定
14        headers: {
15          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')                                                                                                                                                                                                
16       }
17    })
18    .then(
19        function(param){
20            console.log(param); 
21        },
22        function(XMLHttpRequest, textStatus, errorThrown){
23            console.log("エラー");
24    });
25  });
26});