皆さまこんにちは、ウチイダユウゴです！
昨年末にヒィヒィいいながら納品した案件の修正依頼が、クライアントからぼちぼちでてきています。
うーん、この年末も波乱の予感がするぞ。。。(ﾟДﾟ;)
ajaxでデータが取れない？
そんなわけで、納品コードを見直しながら、修正仕様を確認していた時のこと。
サンプルで作ったコードがIEだけちゃんと動作しないという問題に遭遇しました。
<script type="text/javascript">
var searchWord = $('input#searchWord').val();
var searchResult = $.ajax({
type: 'get',
url: '/sample/search.php?search=' + searchWord,
datatype: 'html'
});
searchResult.done(function(res){
/* 戻りデータを処理して、
* あらかじめ用意しておいたボックスに結果を表示する処理など */
}).fail(function(res){
/* 通信失敗した旨の表示をする処理など */
});
</script>検索結果画面のHTMLをajaxで取ってきて、それをゴニョゴニョ処理してから特定の場所に出力するという仕様です。
デフォルトの検索画面のレイアウトが悪かったり機能が不足していたりで、
今回の要望を満たせないのでajaxで元のデータだけ取ってきてブラウザ側で加工することに。
jQueryは本当にajaxの処理が手軽にできます。感涙です(´；ω；`)
上記のコードで試してみたところ、ChromeやFirefoxなどモダンブラウザでは動作したのですが、
例のごとくIEだけ検索結果が表示されないという状態に陥りました。
原因：URIエンコードされてないので検索一致しなかった
ふざけんなよーと思いつつ、うまくいかないパターンを調べていったところ、
全角文字を含むときに事象が発生していることが発覚しました。
そこで、検索文字列をURIエンコードしてないことに気づいたのでした。
<script type="text/javascript">
/* 検索文字列（ユーザー入力）をURIエンコードする */
//var searchWord = $('input#searchWord').val(); //修正前
var searchWord = encodeURIComponent( $('input#searchWord').val() ); //修正後
var searchResult = $.ajax({
type: 'get',
url: '/sample/search.php?search=' + searchWord,
datatype: 'html'
});
searchResult.done(function(res){
/* 戻りデータを処理して、
* あらかじめ用意しておいたボックスに結果を表示する処理など */
}).fail(function(res){
/* 通信失敗した旨の表示をする処理など */
});
</script>ユーザーが入力したinputの内容を、URIに含められる形に変換してからajaxするように改修しました。
エンコード忘れとは…ちょっとしたセキュリティホールになるところでしたね…(;´･ω･)
今回はIEではなくウチイダの落ち度でした。動作確認とデバッグはしっかりやろう…！！
ChromeやFirefoxは自動的にエンコードしてくれるので、修正前のコードでも動いてたんですね…
いや～かしこいなあ…
ブラウザの便利仕様に頼ることなく、ミスのないコーディングをできるようになりたいです。。。
以上、本日はここまで！
最後までお読みいただきありがとうございました(/・ω・)/
コメント