辿り着くまでに
今日は仕事でWebアプリの保守してました、疲れた、、
admin画面を作成していたのだが、
検索ボタンを押した時に入力フォームをhideしたいということで、
苦戦しておりました。
Javascriptを書いても、一瞬hideされてすぐ戻るんだ、、、
悲しい、、、
ということで調べまくっていたところ、
ajaxとやらがいいらしい？
非同期処理とやらがいいらしい？
ということでjQueryのajaxを使用してみっか！
非同期処理とは
ボタンポチ！＝関数起動！
が同期処理。
ボタンポチ！＝第１関数起動！ ・・・数年後。第２関数起動！
これが非同期処理なのだ。
というのは冗談で、
・・・詳しく書いてるサイトがありましたのでリンク貼っています。
https://qiita.com/yunity29/items/7ccc84d47e139340ecbc
代表的なのはGoogleMapとか。
リロードしなくても、ボタン押さなくても、地図がガシガシ更新されてます。
非同期処理なかったら１ミリ動かしたらリロードしなあかん。しぬ。
ajaxについて
ajaxはjQueryのメソッドで、
「このAjaxを使うことで、Webページ全体を更新することなく「一部分だけ情報を更新する」ことが可能です。」
これです。
つまり非同期処理を行うために、使うのがajaxです。
使い方はこちら
$.ajax({
url: ‘××××’ //URLまたはディレクトリを記載
})
.done(function(data){ // 通信が成功したときの処理
})
.fail(function(data){ // 通信が失敗したときの処理
})
.always(function(data){ //通信の成否にかかわらず実行する処理
});
参考 https://job-support.ne.jp/blog/javascript/howto-ajax
まとめ
今回実装したのはこれ↓
<script>
$(document).ready(function() {
$('.submit').click(function(e) {
$.ajax({
url: // サーバーのエンドポイント。
type: 'GET',
success: function(response) {
$('#formRow').hide();
},
error: function(jqXHR, textStatus, errorThrown) {
console.error(textStatus, errorThrown);
}
});
});
});
</script>
こんな感じで書いてみました。
これで、検索ボタンポチ！→検索！ ・・・２年後。formRowをhide！
となるわけです。
めでたしめでたし。
おわり。