IE11への対応 jQueryでAjax使うとInternal Server Errorがでる

こんにちは。菜笑[なえ]です。
今回は「IE11への対応 jQueryでAjax使うとInternal Server Errorがでる」という内容で書いていきます。

事象

いつも個別対応が必要になるInternet Explorerさん。
今回はjQueryでAjaxを使っていた時に、IE11で確認するとInternal Server Errorがでた時の対処法です。

調べるとキャッシュの問題というのが一番多かったですが、今回はFormData が原因でした。

コード状況

動かなかったのは以下のコードです。

let form = $('form').get()[0];
let formData = new FormData( form );

$.ajax({
  url: url,
  method: 'post',
  dataType: 'json',
  data: formData,
  processData: false,
  contentType: false

}).done(function( res ) {
  console.log(res);

}).fail(function( jqXHR, textStatus, errorThrown ) {
  console.log( 'ERROR', jqXHR, textStatus, errorThrown );
});

ちなみにChromeや、Edgeでは動いています。

解決方法

IEではFormData がちゃんと対応できてないみたいで、サーバーにデータが送られていませんでした。

なのでInternal Server Error が出ていたようです。

ということでFormData で送ろうとしていたものを、別の形式にして送ってあげれば正しく動きました!

// FormData ではなく、ハッシュで
var sendData = {
  shop_id: $('#shop').val()
}

// キャッシュ削除
$.ajaxSetup({
  cache: false
});

// オプション削除 (processData, contentType)
$.ajax({
  url: url,
  method: 'post',
  dataType: 'json',
  data: sendData

}).done(function( res ) {
  ajax_done(res);

}).fail(function( jqXHR, textStatus, errorThrown ) {
  console.log( 'ERROR', jqXHR, textStatus, errorThrown );
});

その他試作コード

ちなみに、以下の方法ではダメでした。
serialize() を使うというものだったんですが、同じくInternal Server Error になってしまいました。

// IEの時はserialize のデータ
var $form = $('form');
var form = $form.get()[0];
var formData = new FormData( form );
if (!formData && (userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
  var sendData = $form.serialize();
} else {
  var sendData = sendData;
}

// キャッシュ削除
$.ajaxSetup({
  cache: false
});

// オプション削除 (processData, contentType)
$.ajax({
  url: url,
  method: 'post',
  dataType: 'json',
  data: sendData

}).done(function( res ) {
  ajax_done(res);

}).fail(function( jqXHR, textStatus, errorThrown ) {
  console.log( 'ERROR', jqXHR, textStatus, errorThrown );
});

おわりに

キャッシュだけが原因という記事もたくさんあったので、FormData を使用してない方はキャッシュが原因なのかもしれません。

ほかにもIEだけで使えないものはたくさんあるので、IE対応必要な方は今一度確認しておいたほうがいいかと思います。

参考文献

ありがとうございます!

SNS

Twitter:@nae310_
Instagram:310nae