質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

16871閲覧

【jquery】submitイベント内のajax処理がうまくいかないことはあるでしょうか?

k499778

総合スコア599

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/06/08 12:09

現在上記タグ、またはcakePHP3をつかって画面遷移処理を作っています。

htmlにformがあって、action属性で遷移先(のアクション)を指定しています。

submitボタンを押すと、
jQueryのsubmitイベント内のajax処理を行います。

なので
ボタン押下→jQueryでajax処理→画面遷移
すると思ってます。

実際に大概そのように処理されるのですが、たまにajaxのfailに入ってしまうことがあるのです。

もしかしてajaxが非同期だから、ajaxの処理が終わる前に画面遷移処理が走り、保持しているデータが変わったりしてエラーが発生しているのか。
といった可能性を懸念しています。

そのようなことは可能性としてあるでしょうか?

submitイベント内のajax処理より先にformに指定している遷移先へ移動してしまうといったような。

わかる方、あるいは他の可能性を教えていただける方がいればご指導ご鞭撻のほどよろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

基本的に ajax は非同期処理なので submit のデフォルトアクションは ajax 処理が終わるまで待機する事はありません。
async: false にすれば待機しますが、ajax 処理が終わるまで画面が固まります。
その設計で問題が少ないのは event.preventDefault でデフォルトアクションを抑止しておき、ajax が終わってからコールバックで form.submit() を呼び出す動作になると思います。

Re: k499778 さん

投稿2016/06/08 13:42

think49

総合スコア18172

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

k499778

2016/06/08 14:09

回答有り難うございます。 やはりajaxが非同期のため、画面遷移処理を先に行ってしまい、想定していた動きと変わる可能性があるということですよね? やはりそうなんですね。 そうとわかれば一応自分の中でも対策があって、 画面遷移処理をformタグのaction属性で行わずに ajaxのdoneのタイミングで、doneメソッドの中に書こうと思っています。 そうすれば確実にajax処理後に画面遷移が行えるのでそれで行こうと思っています。 おそらくthink49さんもそのようなアドバイスをくれているのだと思いますが。 悩みが解決して良かったです。ありがとうございました。
k499778

2016/06/08 14:10

てことはsubmitメソッドの中ではうかつにAjaxは使えないということなんですかね。。
think49

2016/06/08 14:22

> ajaxのdoneのタイミングで、doneメソッドの中に書こうと思っています。 対処療法的にはそれでいいと思います。 > てことはsubmitメソッドの中ではうかつにAjaxは使えないということなんですかね。。 そうですね。同期処理の中で非同期処理を差し込むのは相性が良くありません。 最終目標にもよりますが、普通はsubmit先のサーバサイドスクリプトの処理で完結させますね。 あるいは、ajax処理のタイミングをsubmitよりも前に持っていきます。
k499778

2016/06/08 14:35

返答ありがとうございます。 どれもこれも貴重なご意見で。 参考にさせていただきます!
guest

0

根本の解決にはなりませんが、
デフォルトのイベントをキャンセルして
ajaxのコールバックでformを送信すれば理想の動きになるんではないでしょうか?

javascript

1$('form').on('submit',function(){ 2 var _this = $(this); 3 4 $.ajax({ 5 type: 'POST', 6 url: 'hoge.php', 7 data: { 8 hoge: 'hoge' 9 } 10 }).done(function () { 11 _this.submit(); 12 }); 13 14 return false; 15}); 16

※追記
申し訳ございません。
think49様が同様の回答をしておりました。
preventDefaultを使用した例は下記です。

javascript

1$('form').on('submit',function(e){ 2 3 //デフォルトの処理をキャンセル 4 e.preventDefault(); 5 6 var _this = $(this); 7 8 $.ajax({ 9 type: 'POST', 10 url: 'hoge.php', 11 data: { 12 hoge: 'hoge' 13 } 14 }).done(function () { 15 _this.submit(); 16 }); 17 18}); 19

投稿2016/06/08 14:01

編集2016/06/08 14:05
fuji_fe

総合スコア93

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

k499778

2016/06/08 14:13 編集

回答ありがとうございます。 やはりAjaxの非同期が原因でそのようなケースがあり得るということですよね? ありがとうございます。 コールバックで対処するようにしようと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問