フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

Ajaxで日本語(SJIS)が文字化けする場合の原因と対応方法

スポンサーリンク

スポンサーリンク

f:id:ksakae1216:20170209223613j:plain

結論から先に書きますが、Ajax通信で日本語(SJIS)が文字化けする場合は、MimeTypeを上書きすれば文字化けしません!!

 

 

Ajax通信で日本語が文字化け

現在のプロジェクトがStruts2使っていて、DBのデータを表示してます。

 

最近では珍しく、文字コードがSJISでなければいけなくてJSP、DBの文字コードもSJISに統一してます。

 

開発は順調に進んでたんだけど、1つだけ問題が・・・

 

画面であるアクションを起こした時に非同期でAjax通信してメッセージを画面に表示するんだけど、文字化けしている?!

 

Firefoxは大丈夫だけど、IEがダメみたい。

 

文字化けの原因

jQueryのAjax通信はデフォルト文字コードがUTF-8です。

 

そこにShift-JISの文字コードを渡したり、読み込ませたりするため文字化けします。

 

対応方法

Ajax通信の文字コードをShift-JISに変更します。

 

やり方は"beforeSend"でMimeTypeにShift-JISを指定する!!

gist4835f62d1e6537958398a7f40603a6c8

 

"text/html"の部分はそれぞれ自分が使うものに変えてください

私はJSONでデータやりとりしてるので"application/json"に変えました

 

最後に

文字化けは、今回のように扱ってる文字コードがそれぞれ異なるのが原因です。

 

なので、DB、サーバーサイド、フロントサイド、通信それぞれの文字コードをしっかり確認することができれば文字化けを防ぐことができます!!

 

Ajax通信は"beforeSend"で始まる3行追加するだけなのでとりあえず手軽に試せますね 。

 

これでも解消しない場合は、DB、サーバーサイドの文字コードを疑ってください。