2016-03-29 15 views
0

私は自分のドメインで私たちと一緒にウェブページを作成するクライアントのための連絡フォームで働いています。私たちはホスティングとウェブエディタを用意してウェブサイトを作成しています。彼らはウェブサイトにコンタクトフォームを作成し、ウェブサイトを訪問して連絡先のフォームを記入すると、そのフォームに私たちのプラットフォームに送信され、顧客にコンタクトフォームを記入したことを通知する電子メールをクライアントに送信します。JQuery AJAX - 添付ファイル付きのJSONPフォームを送信

クライアントのWebページでjsonp ajaxコールを使用してフォームをGoogleのプラットフォームに送信し、メールテンプレートを実行してメールを送信しています。

私たちのクライアントはinputフィールドタイプを追加して、そのページを訪問した誰でもファイルをフォームに添付できるようにしました。連絡先通知メールに添付ファイルが表示されますが、それはGETメソッドを使用してcrossdomainリクエストを作成し、私がStackoverflowでserarchedしたものを使用するので、jsonpを使用してそれを行う方法を見つけます。POSTメソッドを使用してフォームでファイルを送信し、フォームデータをnew FormData()として取得します。ここで

は、私は実装を試みる前に持っていたコードは次のとおりです。

var $form = $('form'); 
$form.submit(function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     url: url, 
     processData: false, 
     contentType: false, 
     dataType: "jsonp", 
     data: new FormData(this), 
     beforeSend: function() { 
      $form.data('allowSending', false); // To prevent multiple sendings while processing 
     }, 
     success: function(data) { 
      alert(data.message); 
      $form.data('allowSending', true); 
     } 
    }); 
}); 

それが送信した場合:

var $form = $('form'); 
$form.submit(function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     url: url, 
     dataType: "jsonp", 
     data: $form.serialize(), 
     beforeSend: function() { 
      $form.data('allowSending', false); // To prevent multiple sendings while processing 
     }, 
     success: function(data) { 
      alert(data.message); 
      $form.data('allowSending', true); 
     } 
    }); 
}); 

これは私が試してみたが、予想通り、それが処理されないのコードです私が試したコード(2番目のコード)を埋め込んだフォームは、次のようにURLを介してオブジェクトとしてデータを送信しようとします:?callback=jQuery111107622947758095266_1459251318335&[object%20FormData]&_=1459251318336

どうすればこの問題を解決できますか?

ありがとうございます。

よろしくお願いいたします。

PS:フォームを完全に動的にするため、ソリューションでパラメータを手動で渡すなどの場合は、ループはforの動的な方法で行う必要があります。

+0

「POST」とタイプしてみましたか? –

+0

デフォルトでは、jQuery ajaxはGETメソッドを使用してデータを送信し、POSTに変更します(第2のもの)。 –

+0

@MineshPatel - 'dataType:" jsonp "、はGETを強制し、' method'または 'type'を無視します。 – Quentin

答えて

1

短い答えはできないということです。

JSONPがGETリクエストを行ったので、contentTypeは無視され、dataは文字列として扱われます(processData: falseと言っています)。

あなたが言うように、JSONPはURL内のすべてをエンコードします。 the File APIを使用してファイルの内容を読み取ってbase64でエンコードされた文字列に変換することは可能ですが、最小のファイル以外のURLの長さの制限を超えてしまい、実用的ではありません。

JSONPの使用を中止してください。これは、同じ起源の政策のまわりでこっそりしていた、率直に汚れた、ハックです。 CORSがあります。これは、同じオリジンポリシーを選択的に無効にするための、標準的で非ハックで柔軟性の高い方法です。柔軟性の利点の1つは、クロスオリジンPOSTリクエストを使用してそれを使用できることです。

+0

私はCORSを使って原点通過要求をしたことがありません。あなたは簡単な例を共有できますか? :)私はAJAX呼び出しを行うためにjQueryを使用しているので、フレームワーク内でCORSを使用できるかどうかわかりません。 – DaGLiMiOuX

+0

@DaGLiMiOuX - 既存のコードから 'dataType:" jsonp "、'を削除します。あなたがサーバー上で行う必要があるすべての他の変更。私がリンクしているドキュメントは、あなたが設定する必要があるヘッダを示しています。生のPHPで作業している場合は、 'header()'関数を使用してください。 – Quentin

+0

ありがとうございます。私は生のPHPではなくSymfonyを使用しています – DaGLiMiOuX

関連する問題