ajaxのjQueryのバージョンによる基本的な書き方

ajaxはぺ-ジを更新しなくてもペ-ジの中身を入れ替えたりすることができる非同期処理を行うことができます。

そのためajaxは多くのサイトで使用されています。

今回はajaxの基本的な書き方を紹介していきたいと思います。

ajaxはjQueryのバージョンによって書き方が異なります。

旧バージョンの書き方に慣れている人も多いと思いますが新しいjQueryのバージョンで書き方が少し変わっているので注意しましょう。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

ajaxの基本的な書き方

jQuery2系のajaxの書き方

jQuery.ajax({
         url:'https:〇〇〇〇',
         type:'post',  
         cache: false,       
         dataType:'html',
         data:data,
         success:function(mydata){
             ~
         },
         error: function(XMLHttpRequest, textStatus, errorThrown) {
                console.log("XMLHttpRequest : " + XMLHttpRequest.status);
                console.log("textStatus     : " + textStatus);
                console.log("errorThrown    : " + errorThrown.message);
                        } 

         }
});
urlアクセスさせるURLを入力
typepostまたはgetを指定
cachecacheを使うかどうかを指定
dataTypeデータの形式を指定(html、json、xmlなど)
dataアクセスするときに必要なデータを指定
successajax通信が成功したとき実行させる。jsなどの処理を入れることができる。
errorajax通信が失敗したとき実行させる。

jQuery3系のajaxの書き方

jQuery.ajax({
         url:'https:〇〇〇〇',
         type:'post',
         cache: false,
         dataType:'html',
         data:data,
      .done(function(response) {
         ~
      })
      .fail(function(xhr) { 
         ~
      })
      .always(function(xhr, msg) {
         ~
});

jQuery2系と書き方はほとんど同じですが違うところはajax通信が成功、失敗、完了したときの処理の書き方が違います。

doneajax通信が成功したとき実行させる
failajax通信が失敗したとき実行させる
alwaysajax通信が完了したら実行させる
未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

ajax
スポンサーリンク
blogをフォローする
フロントエンジニア&コーダーのためのマテリアルブログ

コメント

タイトルとURLをコピーしました