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

Question

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

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

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

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

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

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

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

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

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

Answer 1

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

Re: k499778 さん

Comments

[k499778]

回答有り難うございます。
やはりajaxが非同期のため、画面遷移処理を先に行ってしまい、想定していた動きと変わる可能性があるということですよね？

やはりそうなんですね。
そうとわかれば一応自分の中でも対策があって、

画面遷移処理をformタグのaction属性で行わずに
ajaxのdoneのタイミングで、doneメソッドの中に書こうと思っています。
そうすれば確実にajax処理後に画面遷移が行えるのでそれで行こうと思っています。
おそらくthink49さんもそのようなアドバイスをくれているのだと思いますが。

悩みが解決して良かったです。ありがとうございました。

[k499778]

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

[think49]

> ajaxのdoneのタイミングで、doneメソッドの中に書こうと思っています。
対処療法的にはそれでいいと思います。

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

[k499778]

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

Answer 2

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

$('form').on('submit',function(){
    var _this = $(this);
    
    $.ajax({
        type: 'POST',
        url: 'hoge.php',
        data: {
            hoge: 'hoge'
        }
    }).done(function () {
        _this.submit();
    });

    return false;
});

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

$('form').on('submit',function(e){

    //デフォルトの処理をキャンセル
    e.preventDefault();

    var _this = $(this);
    
    $.ajax({
        type: 'POST',
        url: 'hoge.php',
        data: {
            hoge: 'hoge'
        }
    }).done(function () {
        _this.submit();
    });

});

Comments

[k499778]

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