ajaxを使って非同期通信でデータを取得したいがリロードされる

Question

前提・実現したいこと

laravelでjqueryのajaxを使って検索機能を実装しようとしています。
サーバーにあがったhtmlを差し替える形で、検索結果を表示したいのですが、
リロードされてしまいます。

コードの記述をいろいろ変えたのですが、解決方法・原因が分からないため質問させていただきます。

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

コンソールで確認すると、「[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.」
というエラーが出ます。

該当のソースコード

<list.blade.php>
<div id="table">
@extends('layout')
@section('title','ブログ一覧')
@section('content')
  <div class="row">
  <script src="{{ asset('/js/delete.js') }}"></script>
  <script>
    $(function(){
      $('#button').on('click', function(){
        var val = $('#keyword').val();
        $.ajax({
          type:'GET',
          url:'/search',
          datatype:'html',
          async:true,
          data: {keyword: val }
        })
          .done(function (response) {
            $('#table').html(response);
          }).fail(function (err) {
              // 通信失敗時の処理
            alert('ファイルの取得に失敗しました。');
        });
      }
      );
    });    
  </script>
   <div class="col-md-8 col-md-offset-2">
      <h2>ブログ記事一覧</h2>
          <div class="form-group">
          <form id="search" class="form-inline" action="{{url('/search')}}">
             　<input type="text" name="keyword" value="@if (isset( $keyword )) @endif" id="keyword" placeholder="キーワード入力" >
             　<button id="button">検索</button>
            </form>
          </div>  
      @if (session('err_msg'))
          <p class="text-danger">{{ session('err_msg') }}
          </p>
      @endif
      <table class="table table-striped">
          <tr>
        　  <th>記事番号</th>
        　  <th>タイトル</th>
        　  <th>日付</th> 
        　 @auth<th></th>@endauth
         </tr>
         <tr>
          @foreach($blogs as $blog)
              <td>{{ $blog->id }}</td>
              <td><a href="/blog/{{ $blog->id }}">{{ $blog->title }}</a></td>
              <td>{{ $blog->updated_at }}</td>
              @auth
              <form method="POST" action="{{ route('delete',$blog->id) }}" onSubmit="return checkDelete()">
              @csrf
              <td><button type="submit" class='btn btn-primary' onclick=>削除</button></td>
              @endauth
         </tr>
           @endforeach
     </table>
      {{ $blogs->links() }}
      <br>
  　</div>
　</div>
</div>
@endsection

<web.php>
//検索機能
Route::get('/search', [BlogController::class, 'getSearch'])->name
('search');

<BlogController.php>
//検索機能
    public function getSearch(Request $request)
    {
        // キーワードを取得
        $keyword = $request->input('keyword');

        //クエリ作成
        $query = Blog::query();
        

        //キーワードが入力されている場合
        if(!empty($keyword)){
        $query->where('title', 'like', '%'.$keyword.'%')
              ->orWhere('body','like','%'.$keyword.'%');
        }
        
        // 検索結果を5件ごとに表示
        $blogs = $query->paginate(5);
        

        // 検索結果をブログ一覧に表示
        return view('blog.list')->with(compact("blogs","keyword"));
        }
}

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

MAMPのバージョンは6.0.1(986)
VScodeバージョン: 1.55.0
jquery2.2.4
laravelのバージョンは８です。

Comments

[Lulucom]

検索ボタンのtype属性の値をbuttonにすると改善されますか？
<button id="button" type="button">検索</button>

[moru]

type属性をbuttonにすると改善されました…
属性を設定しないとデフォルトでsubmitになってしまうということでしょうか‥
また一つ勉強になりました。ありがとうございます。

Answer 1

検索ボタンのtype属性の値をbuttonにするとどうでしょうか。

<button id="button" type="button">検索</button>

Comments

[Lulucom]

> 属性を設定しないとデフォルトでsubmitになってしまうということでしょうか‥

はい、その通りです。