Ajax処理後の処理順序

会員登録フォームを作成しています。

form1の中にpage1とpage2というdiv要素があり、それぞれのdisplayの値を切り替えることで
画面が遷移しているように見える作りになっています。

その中で、ajaxでPHPの処理を呼び、結果を元にHTMLに要素を追加する処理を実装しています。

JavaScript
1//入力エラーチェック
2$.ajax({
3	type: "POST",
4	url: "/userCheck",
5	data: "UserID=" + 'test12345',
6	success: function(html){
7	    if (!(html === '')) {
8	  		$('dl.kekka').after('<p class="error_text">' + html + '</p>');
9	    } else {
10	    	$('dl.kekka').next('p.error_text').remove();
11	    }
12	}
13});
14
15if($("#form1").find('p.error_text').length > 0) {
16	return false;
17}
18
19// 画面切り替え
20$('#page1').css('display', 'none');
21$('#page2').css('display', '');

理想としては、結果が返ってきた場合、page1に<p class="kekka_comment">を追加の上画面に表示し、
後続の画面切り替え（page1を非表示＆page2を表示）は行わない、という処理にしたいです。

しかし、現状は、画面が切り替わってしまいます。
page2に実装している戻るボタンでpage1に画面を切り替えると、

<p class="error_text">が結果とともに表示されているので、 ajax自体は正しく動いているようです。

ajaxを使用せずに追加している<p class="error_text">エラーコメント</p>は
lengthでカウントされ、後続の処理が行われません。

処理順序を変える方法はありますでしょうか？
そもそも当方ajaxの仕組み（非同期処理？）自体がよくわかっていないと思われます。
私の実現したいことは技術的に可能なのでしょうか？
何かヒントございましたら教えて頂けると幸いです。

宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

アップされたコードからは分かりませんが、なんとなく ajax が非同期で動く（success に設定したコールバックが呼ばれる前に画面切り替えに行ってしまう）のが原因のような気がします。気がするだけで確証はありませんが、試しに非同期をキャンセルしてみたら（async オプションを false に設定）したらどうなりますか？

ハズレでしたらすみません。

投稿2016/12/20 12:59

編集2016/12/20 13:02

退会済みユーザー

総合スコア0

Ogamary

2016/12/20 13:05

回答ありがとうございます！！ async: false, を追記したら、理想の動きが出来ました！！本当にありがとうございます！！

退会済みユーザー

2016/12/20 14:01

jQuery の API Documentation の説明によると "Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active." とのことなので、あまりお勧めはできないようです。他に手段が見つからなければやむを得ないですけど。あと、async:false とした場合は、jqXHR.done() は使わないで、success, error, complete にコールバックを書けと言うことです。今回そこはそうなっているので問題ないのですが、今後のための追加情報と言うことで・・・

think49

2016/12/20 14:07

参考までに jQuery.ajax は内部的に XMLHttpRequest 利用しており、以下に仕様書の和訳があります。 (「worker 以外での同期的 XMLHttpRequest は...」を参照) https://triple-underscore.github.io/XHR-ja.html#the-open()-method 将来的に削除される運命にあるオプションですね。

Ogamary

2016/12/21 00:59

SurferOnWwwさん think49さんコメントありがとうございます。うまく動作したものの、あまり推奨されていないやり方のようですね。今後の保守も考え、もう少しいいやり方がないか引き続き勉強したいと思います。本当にありがとうございます！

guest1213

2016/12/21 01:34

メインスレッドでasync: falseをした場合、応答があるまでメインスレッドでの処理が行われず、ブラウザがフリーズしたようになります。これはこのTeratailでついこの間まで発生していた問題(11/26から遅いよごめんねみたいなやつ)でもあります。どこかしらかの応答が遅かったのが直接的な原因だったのかもしれませんが、Teratailのトップページはロード時にそこへasync: falseで同期的にリクエストをしていたため一切の操作ができず、非常に苛立たしいことになりました。(ちょっと前からその処理は取り除かれたかと思いますが。) このようにユーザーにとって最悪ともよべる症状がでてしまいますので、「あまり推奨されていない」程度ではなく、少なくともメインスレッドでは絶対に使わない、くらいに捉えた方がよいです。

行動規範の内容に同意します