jquery $.ajax()の基本型

初期設定

・ひとつのサイトでajax()を複数回使うので共通部は最初に設定（$.ajaxSetup()）
・個人的に「post送信・jsonで受け取る」というのが多い。
・buttonタグは「type="button"」にする。

▼最初に読み込ませておく

<script>
$.ajaxSetup({
   type: 'POST',
   dataType: 'json',
   contentType: false,
   processData: false,
   timeout: 10*1000
});
</script>

※「timeout」はミリ秒指定：「10秒」は「10*1000」。

post送信（「type=file」含む）

<form>
   <input type="text" name="〇〇〇" />
   <input type="file" name="imgfile" />
   <button type="button" id="btn">送信</button>
</form>
<script>
   $('#btn').on('click', function(){
      
      // formのデータの成型
      var formAry = $(this).parents('form').serializeArray();
      var fd = new FormData();
      $.each(formAry, function(i, field){
         fd.append(field['name'], field['value']);
      });
      
      // ファイルは別途追加
      fd.append( 'imgfile', $('[name=imgfile]').prop("files")[0] );
      
      $.ajax({
         url: 〇〇〇,
         data: fd
      }).done(function(data) {
         // 成功時の処理
         
      }).fail(function(jqXHR, textStatus, errorThrown) {
         // 失敗時の処理
         
         var codeJqXHR = parseFloat(jqXHR.status);
         var errMes = '';
         if(codeJqXHR == 0 || jqXHR.status == 404 || errorThrown == 'Not Found') {
            errMes = 'There was a 404 error.';
         }
         else {
            errMes = 'XMLHttpRequest : ' + jqXHR.status + "\n"
                   + 'textStatus : '     + textStatus   + "\n"
                   + 'errorThrown : '    + errorThrown  + "\n";
         }
         
         console.log(errMes);
      }).always(function() {
         // 処理完了時（done()、fail()の後に入ってくる。）
         console.log('fin');
      });
   });
</script>

get送信

get送信は滅多にしないのでとりあえずな感じ。

・「$.ajax()」で「type:'get'」を追加
・フォームデータをクエリに変換（「url: 〇〇〇」に追加）

<form>
   <input type="text" name="〇〇〇" />
   <button type="button" id="btn">送信</button>
</form>
<script>
   $('#btn').on('click', function(){
      
      // formのデータの成型
      var formAry = $(this).parents('form').serializeArray();
      var prms = '?1';
      for (var i in formAry) {
         prms += '&' + formAry[i]['name'] + '=' + formAry[i]['value'];
      }
      
      $.ajax({
         url: 〇〇〇 + prms,
         type: 'get'
      }).done(function(data) {
         // 成功時の処理
         
      }).fail(function(jqXHR, textStatus, errorThrown) {
         // 失敗時の処理
         
         var codeJqXHR = parseFloat(jqXHR.status);
         var errMes = '';
         if(codeJqXHR == 0 || jqXHR.status == 404 || errorThrown == 'Not Found') {
            errMes = 'There was a 404 error.';
         }
         else {
            errMes = 'XMLHttpRequest : ' + jqXHR.status + "\n"
                   + 'textStatus : '     + textStatus   + "\n"
                   + 'errorThrown : '    + errorThrown  + "\n";
         }
         
         console.log(errMes);
      }).always(function() {
         // 処理完了時（done()、fail()の後に入ってくる。）
         console.log('fin');
      });
   });
</script>

エラー時

・ajax()を実行時に「Illegal invocation」が出たときの対処

関連項目

・javascriptのajaxとformのボタンタグについて
・javascript：formタグ無しでform送信
・ajax()を実行時に「Illegal invocation」が出たときの対処