私は自分のドメインで私たちと一緒にウェブページを作成するクライアントのための連絡フォームで働いています。私たちはホスティングとウェブエディタを用意してウェブサイトを作成しています。彼らはウェブサイトにコンタクトフォームを作成し、ウェブサイトを訪問して連絡先のフォームを記入すると、そのフォームに私たちのプラットフォームに送信され、顧客にコンタクトフォームを記入したことを通知する電子メールをクライアントに送信します。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
の動的な方法で行う必要があります。
「POST」とタイプしてみましたか? –
デフォルトでは、jQuery ajaxはGETメソッドを使用してデータを送信し、POSTに変更します(第2のもの)。 –
@MineshPatel - 'dataType:" jsonp "、はGETを強制し、' method'または 'type'を無視します。 – Quentin