LoginSignup
37
39

More than 3 years have passed since last update.

Ajaxの書き方について(jQuery利用)

Posted at

jQueryでのajaxの書き方が実はVer3から書き換わっています。書き換え方を書きたいと思います。

jQuery2までは、ajaxの書き方はSucess&Errorの書き方でした。

jQuery2までのajax
$.ajax({
         url:'アクセスするURL', //アクセスするURL
         type:'postかget',   //post or get
         cache: false,        //cacheを使うか使わないかを設定
         dataType:'json',     //data type script・xmlDocument・jsonなど
         data:data,           //アクセスするときに必要なデータを記載
         success:function(mydata){
             //データの有無を確認
             //成功したときの実行したいScriptを入力
         },
         error:function(){ 
        //失敗したときの処理させたいScriptを記入する
         }
});

これが通常でした。
jQuery3系からは書き方が変わります。

jQuery3以降の書き方は以下のとおりです。done&fail&alwaysに変わります。

doneは成功時に実行したいスクリプトを記載します。
failは失敗時の実行したいスクリプトを記載します。
alwaysは結果に関わらず実行したいスクリプトを記載します。

jQuery3系のajax
$.ajax({
        url: 'アクセスするURL', //アクセスするURL
        type: 'postかget',   //post or get
        cache: false,        //cacheを使うか使わないかを設定
        dataType:'json',     //data type script・xmlDocument・jsonなど
        data:data,           //アクセスするときに必要なデータを記載      
      })
      .done(function(response) { 
         //通信成功時の処理
         //成功したとき実行したいスクリプトを記載
      })
      .fail(function(xhr) {  
      //通信失敗時の処理
         //失敗したときに実行したいスクリプトを記載
      })
      .always(function(xhr, msg) { 
     //通信完了時の処理
        //結果に関わらず実行したいスクリプトを記載
   });   

このように変わります。
C#のtry catchを思い浮かべてみればよくわかります。
下に書いてみます。

C#でのTryCatch
try{
   //エラー処理を拾いたい処理
}
catch(Exception){
   //エラー処理
}
finally{
   //処理終了時の処理
}

感じ的にはにているんですが。
try catchはあくまでもエラー処理なのでajaxの例としては通信処理をtry catchしていると伝えたほうが簡単です。
難しく考えなくても簡単に作ることはできると思います。
内容を書き換える時は通信正常時のみに行わせ、通信異常時はAlertを表示させる、通信完了時には通信の正常化エラー化を表示させればフォームが作り上げられるということになります。
ローカル実装でのajaxはChromeではエラーになるのでFirefoxを入れておくといいでしょう。
Chromeの正常系のURLはhttpはブロックされますのでFirefoxで実行すると正常系と扱われます。
このあたりも気をつけてください。
実行できないと悩んでいる場合は別のブラウザを使うと意外といいのかもしれませんね。

37
39
1

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
37
39