バックエンドを変更せずに古いウェブサイトフォームをAJAX化しようとしています。元々、バックエンドは、フォームを受け取った後、「302Moved」リダイレクトで「ありがとう」ページに応答していました。
これで、jQuery $ .ajax呼び出しを使用してフォームを送信しようとすると、フォームデータは正常に送信されますが、「302 Moved」リダイレクトがブラウザーによってキャンセルされたようで、jQueryは何が起こっているのかわかりません。
私の問題は、何が起こっても、$。ajax呼び出しがエラーとステータス= 0で返されるため、送信の成功とエラーを区別する方法がないことです。
ブラウザがリダイレクトを追跡しようとするのを防ぐ方法、または少なくとも適切な応答コードを取り戻す方法はありますか? (私はChromeを使用しています。)
いいえ、バックエンドを変更せずにそれを行うことはできないと思います。Ajaxが何をすべきかを認識/理解するには、応答ヘッダーを変更する必要があります。リダイレクトを行った場合は、Ajaxのためにヘッダーを変更する必要があります。コールアンドレスポンスはそれを行いません。
フォームをチェックして追加{{csrf_field()}}。これは、フォームがトークンなしで送信されたときに発生します。
これはあなたを正しい方向に導くことができますか?
$.ajax({
type: "GET",
url: url,
data: data,
complete: function(e, xhr, settings){
if(e.status === 200){
console.log(e.responseText);
}else{
console.log("error");
}
}
});
Ajaxコードは次のようになります。
$.ajax({
'url': '/your-url',
'method': 'post',
'data': form.serialize()
}).done(function(data) {
// something
}).fail(function(jqXHR, textStatus, errorThrown) {
if (jqXHR.getResponseHeader('Location') != null)
{
window.Location= jqXHR.getResponseHeader('Location');
}
// other conditions in failure situation.
});
バックエンドアプリには、jqueryajaxによって処理されない可能性のある相対リダイレクトが適切に含まれています。この状況では、ロケーションヘッダーにはドメイン名は含まれず、相対パスのみが含まれます。いくつかの(私にはわかりません;))理由により、同一生成元ポリシーの問題が発生する可能性があります。面白いことに、リダイレクトを絶対パスに変更すると問題が解決するはずです。 jQuery1.11.1でテスト済み。
理論的なajax呼び出し:
$.ajax({
'url': '/your-url',
'method': 'post',
'data': form.serialize()
}).done(function(data) {
// something
}).fail(function(jqXHR, textStatus, errorThrown) {
// another something
});
したがって、/ your-urlコントローラーには、次のようなものがあります。
return $this->response->redirect('//same.domain/path');
または
return $this->response->redirect('/path');
最初のものは動作します。 2番目ではありません。
重要なのは、バックエンドを変更する必要があるのは確かですが、ほんの少しだけです。本当に別の方法で処理したくない場合は、XmlHttpRequestのリクエストを確認する必要はありません。