Tech Racho エンジニアの「?」を「!」に。
  • 開発

jQuery.formとJSONView

JSONViewは、Firefoxで application/json なコンテンツを綺麗に表示するプラグインです。
とても便利ですね。

ところが、jQuery.formプラグインなどと組み合わせると、不具合を起こすことがあるので注意が必要です。

一般的なajaxでは、

$.ajax({
  url: 'hogehgoe',
  success: function(data, dataType) {
  }
});

といったやりかたをしますが、このときは特に問題ありません。

しかし、jQuery.formで $(‘form’).ajaxSubmit() を使う場合、内部的には$.ajaxは使用されていません。
XMLHttpRequestでは画像データ等のmultipart/form-dataを送信できないため、ダミーのiframeを作って、そこをターゲットにformの送信を実行しています。

//jquery.form.jsの内部コードのイメージ
var iframe = '<iframe id="hoge" onload="irame-onload"></iframe>';
$('form').attr('target', 'hoge');
$('form').submit();

これで、ajaxSubmitをすると、結果がiframeに入ります。
iframeのonloadイベントで、内部のinnerHTMLを見て、結果を呼び出し元に返す処理を行っています。

ここで、iframeの中身がどんな値になるかは、ブラウザの実装依存です。
一般に、プレインテキストやJSON形式が渡ってきたとしても、DOMツリーを構築するためにbodyタグまでは作ってしまうようです。

良くあるパターン

<html>
<head></head>
<body>{"result":"これが結果です"}</body>
</html>

jquery.formプラグインは、ブラウザがbodyタグの中に直接値を入れるか、またはpreやtextareaに値を入れることを期待しています。

しかし、JSONViewを使うと、以下のような綺麗なHTMLを勝手に作ってくれてしまいます。

<html>
<head></head>
<body>
<doctype html="">
  <div id="json">
    {
    <ul class="obj collapsible">
      <li><span class="prop">result</span>: <span class="num">0</span></li>
    </ul>
    }
  </div>
</doctype>
</body>

人間様が見るには良いですが、これではjquery.formプラグインが認識できません。
そんなわけで、doctype html… といった値を丸ごとJSONパースしようとして、エラーになってしまいます。

解決策は、Content-Typeを変えるか、jquery.formを改造するくらいしかありません。

Content-Typeの変更が、一番みんなハッピーになれるはずです。

これに気づかず、JSONViewを入れると動かなくなるWebサイトがあるかもしれませんね。


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。