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(無効化)しておくことで正常な動作が期待できます