$.ajax使用時の文字化け

Question

get送信時のパラメータに日本語を入れて、送信し、データを取ろうとしておりますが、パラメータ(get送信時URL)が文字化けし、うまく取れません。

$.ajax({
   url: /hoge/日本語,
   type: 'GET',
   dataType: 'json',
   contentType: 'charset=utf-8'
})

ほかに、ajaxのオプションに

beforeSend: function(xhr){
    xhr.overrideMimeType('text/html;charset=utf-8');
}

や、

scriptCharset: 'UTF-8'

を試しましたが、同じように文字化けします。
$.ajaxを書いているhtmlの文字コードはutf-8です。

他にやり方や、ここが違っているなどありましたら教えてください。

参考にさせていただいたページ
http://shinimae.hatenablog.com/entry/2015/12/10/164401

ご回答頂いた皆様ありがとうございました。
今回は特に参考になった方にベストアンサーをつけされていただきました。

Answer 1

urlに直接記載するならencodeURIComponent()をかまして下さい

var url='/hoge/'+encodeURIComponent('日本語');
console.log(url);

Comments

[yoshipu]

ありがとうございます。参考になりました。

Answer 2

結論から言うと、URLには日本語のようなマルチバイト文字は使用できません。
URLエンコーディングする必要があります。

Chrome等のブラウザのアドレスバーで日本語が表示されたり、日本語を入力して指定のページに遷移できるのは、ブラウザが内部でエンコード（デコード）をしてくれているからです。

他の人の回答にもあるように以下の通り、dataにクエリパラメータを指定してあげれば、
jQueryがURLエンコーディングしてURLに付加してくれますので、
（以下の例でいえば、/hoge?name=%e5%a4%aa%e9%83%8e のようなURLにしてリクエストを送信してくれます）

$.ajax({
   url: '/hoge',
   type: 'GET',
   data:{name:'太郎'},
   dataType: 'json',
})

他のやり方としては、$.paramというjQueryの関数やencodeURIというjavascriptの関数を使用すれば、エンコーディングしてくれた文字列を返却してくれるので、それをurlに指定してあげれば、dataに指定しなくても日本語のクエリパラメータを送信することはできます。

例)

var uri1 = $.param('/hoge?name=太郎');   // uri1 = '/hoge?name=%e5%a4%aa%e9%83%8e'

$.ajax({
   url: uri1,
   type: 'GET',
   dataType: 'json',
})

Comments

[yoshipu]

ありがとうございます。参考になりました。

Answer 3

url に直接書くのではなく、
data: { key : '日本語', ... }
の形で $.ajax のパラメータにしてやりましょう。

そうすれば jQuery が適切に文字列の URL encoding を行ってくれます。

Comments

[退会済みユーザー]

クエリ文字列形式 (?key=%E6%97%A5%E6%9C%AC%E8%AA%9E) になるのでサーバー側でそれに対応してないとダメかと・・・

Answer 4

url に設定した文字列をパーセントエンコーディングして、ダブルクォート(またはシングルクォート)で囲ってみたらどうなりますか？

【追伸】

エンコーディングの方法ですが、具体的には JavaScript の encodeURI を使ってみてください。

自分が検証した限りでは、使わないわないと IE の場合は Shift_JIS のパーセントエンコーディングになり、サーバー側で正しく取得できませんでした。

url: "api/heroes/日本語"
↓
GET http://localhost:52314/api/heroes/%93%FA%96%7B%8C%EA HTTP/1.1

url: encodeURI("api/heroes/日本語")
↓
GET http://localhost:52314/api/heroes/%E6%97%A5%E6%9C%AC%E8%AA%9E HTTP/1.1

ただし、Firefox, Chrome の場合は encodeURI なしでも UTF-8 のパーセントエンコーディングになるのでサーバー側で正しく取得できました。なのでブラウザ依存のようですが。

Comments

[yoshipu]

ありがとうございます。参考になりました。

Answer 5

備忘録的まとめ

いただいた回答を元に考えて、php 側でurldecodeメソッドを使うことでデコードし、上手く行きました。