Blog

【jQuery】IE9でページ遷移せずにファイルをPOSTしてJSONを受け取る

2015.10.27Cat:javascript jQuery デザイナー
nino-eye

Ajaxを使ってフォームをPOSTすると、ページ遷移しないため、

管理画面などで連続して処理を行いたい場合、

こうすることでユーザのストレスを減らすことができます。

また、そのときのデータの受け渡しをJSONで行うことで、

HTMLの書き換えなどを柔軟に行うことができます。

 

フォームの種類にはいくつかありテキストボックスやチェックボックスなど、

ほとんどのフォーム要素は以下の様なコードを記述することにより、

Ajaxで問題なくPOSTを行うことができます。

 

↓こちらを参照

jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com

 

しかし、ファイルのフォームはこれでは送信できません。

AjaxでファイルのフォームをPOSTするには、

HTML5のfromData APIを利用する必要があります。

↓こちらを参照

[GNJYO!] AjaxでFormDataを使ってファイルアップロードする | GNJYOブログ

 

しかしながら、IE9はFormData APIに対応していません。

そのため、IE9においては、AjaxでファイルをPOSTすることができません。

 

IE9は対応を求められる機会が2015年時点ではまだ多いため、

対応を逃れるのは難しいのが現状です。

 

そんな中、↓こちらのサイトで、

iframeを利用することで、ページ遷移することなくファイルのフォームをPOSTする方法が、紹介されていましたので、紹介いたします。

Ajax的に画像などのファイルをアップロードする方法 ::ハブろぐ

 

↓作ってみたもの

DEMO

(画像はダミーを表示するようにしています)

 

方法

手順は以下のとおり

  1. CSSで非表示にしたiframeを用意し、フォームのtargetをそのiframeに設定
  2. POSTされたデータを元に、プレーンテキストのJSONをPHPで出力し、iframeで受け取る
  3. iframeで受け取ったJSONの文字列をJSON.parse()で連想配列に変換

 

1. CSSで非表示にしたiframeを用意し、フォームのtargetをそのiframeに設定

form にtarget=”[iframeのname属性]” という風に属性を追加することで、

POSTの遷移先を次のページではなく、任意のiframeとして設定することができます。

iframeをCSSで隠してしまえば、POSTしている様子はユーザには見えません。

 

2. POSTされたデータを元に、プレーンテキストのJSONをPHPで出力し、iframeで受け取る

POSTされたPHPでJSONを吐き出しますが、通常のPOSTと異なり、

iframe内にJSONが読み込まれることになります。

その場合、通常のJSON形式だと、IEの場合、ファイルのダウロードとして認識されてしまい、

HTML上のデータとして扱うことができません。

そのため、この場合PHPで吐き出すJSONは、以下の様なヘッダーの設定を行い、

プレーンテキストの形式で出力します。

 

3. iframeで受け取ったJSONの文字列をJSON.parse()で連想配列に変換

iframe内にJSONの内容を読み込むことができましたが、

このままではJSONデータではなく文字列のデータなので、

JSON.parse()を使って文字列からJSONデータに変換します。

これでIE9でもページ遷移なくファイルをPOSTし、JSONをサーバーから受け取ることができました。

 

参考にさせていただいたサイト

jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com

[GNJYO!] AjaxでFormDataを使ってファイルアップロードする | GNJYOブログ

Ajax的に画像などのファイルをアップロードする方法 ::ハブろぐ

 

 

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ