1
3

More than 1 year has passed since last update.

【備忘録】Laravelによる非同期処理(Ajax)の使い方

Last updated at Posted at 2022-10-25

Ajaxとは何?

まずはAjaxとは「Asynchronous JavaScript XML」の略です。
「Asynchronous」は「非同時性の、非同期の」という意味です(コトバンク)
Ajaxは「JavaScript+XMLによるサーバーとの通信」となります。

Ajaxの書き方について

Ajaxを利用するにはJava Scriptファイルもしくは
scriptタグ内に処理、つまり次のテンプレートを記述します

jsファイルにコードを記述する場合

index.js
$.ajax({
          //以下の引数は使用しない場合省略可能です
         url: URL’ //LaravelのルーティングにつなぐURL
         type: 'postかget',
         cache: false, //cacheを使うかどうか
         dataType:'json', //data type scriptなどデータタイプの指定
         data:引数名, //Laravelのコントローラへ渡す引数を記述する
                    // $request->引数名 などで呼び出せます
         })
         .done(function(data){ // 通信が成功したときの処理 
         })
         .fail(function(data){ // 通信が失敗したときの処理(メッセージなど)
         })
         .always(function(data){ //通信の成否にかかわらず実行する処理 
    });

scriptタグに記述する場合

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS overflow</title>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script>
      $.ajax({
             //以下の引数は使用しない場合省略可能です
             url: URL’ //LaravelのルーティングにつなぐURL
             type: 'postかget',
             cache: false, //cacheを使うかどうか
             dataType:'json', //data type scriptなどデータタイプの指定
             data:引数名, //Laravelのコントローラへ渡す引数を記述する
                        // $request->引数名 などで呼び出せます
             })
             .done(function(data){ // 通信が成功したときの処理 
             })
             .fail(function(data){ // 通信が失敗したときの処理(メッセージなど)
             })
             .always(function(data){ //通信の成否にかかわらず実行する処理 
            });

    </script>
  </head>
  <body>
    
  </body>
</html>

パラメーターの説明(cache)

  • cache(デフォルトはtrue)
    一時データを示します。
    例としてボタンを押すことで現在時刻を示す非同期処理を作成した場合
    cacheを有効したままだと、過去に保存された時刻を表示してしまうこともあり、
    正確な時刻を表示できない可能性があります。
    よって、cacheはfalse(無効化)しておくことで正常な動作が期待できます
1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3