作成日:2018-01-10, 更新日:2018-03-28
初期設定
・ひとつのサイトで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」が出たときの対処