こんにちは。菜笑[なえ]です。
今回は「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対応必要な方は今一度確認しておいたほうがいいかと思います。
参考文献
- 非同期通信のキャッシュを無効化するには？（$.ajax［cache］）
- FormData file, ajax doesn’t post $_FILES in IE 11
- jQueryでJSONをPOSTしてJSONのレスポンスを受け取る
ありがとうございます！
