Ajaxのデータの受け取りがうまくいきません。

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
LaravelにおいてAjaxのデータの受け取りが非同期にならずに、受け取ったデータそのままがサイト上に表示されてしまいます。コンソール上にも何も表示がされません。お分かりになる方、どうぞご教授下さい。

発生している問題・エラーメッセージ

ControllerよりViewへデータを渡しているのですが、非同期にならず、受け取ったデータそのままがサイトに表示されます。

該当のソースコード

●Route
Route::get('/test', function () {return view('test');});
Route::post('/test', 'TestController@test');

●Controller
//投稿内容をDBから受け取る
public function test()
    {
        $data = "test";
        return $data;
    }

●View
<script type="text/javascript">
    $('#test').click(function(){
    
    //Ajaxに渡すデータ
    var data = 'test';  

    //Ajax通信を行う
    $.ajax({
        url:"/hairLoss/test",
        type:"POST",
        dataType:"text",
        data:{'datas': data},
    })
    .done((data) => {
    console.log(data);
    var test = JSON.parse(data);
    console.log(test);
    })
    .fail((data) => {
  
    console.log(data.responseText);  
    })
    .always((data) => {
    
    console.log(data);
    });
    });
</script>

    <form method='POST' action="/test">
         {{ csrf_field() }}
    <input id="test" type="image" src="/img/icon_test.png" width="30px" alt="送信する">
    </form>

●サイト上の表示
test

試したこと

Controllerの内容を以下のように変更してみたのですが、結果は同じでした。
//投稿内容をDBから受け取る
public function test()
{
$data = ["test"=>'test'];
json_encode($data);

    return response()->json(['test' => 'test']);
}

Viewをaction=""に変更しますと「The POST method is not supported for this route. Supported methods: GET, HEAD.」とエラーが出ました。

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

実際にはコントローラー上で処理があるのですが、何が原因か確認をする為に上のような簡単なものに書き換えたのですが、それでもデータの受け取りがうまくいきませんでした。よろしくお願い致します。

Answer 1

type=imageはsubmitボタンだったはずで、通常のform送信が行われてるのではないでしょうか。(/test2のルーティング提示されてないですが、あるんですよね？)

非同期で処理させたいならsubmitを止めるか、buttonのtypeを変えるか、formタグ自体なくすとか、でしょうか。いずれにしても要件次第です。
ただ、Ajaxと画面でURLが同じなのは管理面ではあまりよろしくないとは個人的に思います。

Comments

[BWC]

こんにちは。ご返信ありがとうございます。/test2ですが、こちら書き間違えでした。/test
になります。変更をさせていただきました。
type=imageからsubmitに変更をしたのですが、変化はなく同じ結果となりました。また、出来るだけイメージをクリックするようにしたいと思っております。
formタグをなくすというのは、そのまま削除でよろしいでしょうか？formタブを削除して試してみましたら、ページが遷移しなくなりました。
アドバイスありがとうございます。

[m.ts10806]

違いますよ。imageはsubmitボタンと同じ
と書いてます
HTMLの仕様の話です。LaravelやPHPの話ではないです。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/image
＞image 型は、テキストではなく画像の形をとる送信ボタン、すなわち送信ボタンを作成するために使用されます。

[BWC]

返信ありがとうございます。リンク参考にさせていただきます。

[m.ts10806]

PHPでもLaravelでもなんでも同じですが、困ったらまず公式もしくはそれに近いドキュメントを確認することです。
初心者から抜け出すために必須の習慣ですよ。