Ajaxの戻り値を判定して、ページ遷移をしたい。

前提・実現したいこと

Webアプリケーションでログイン画面を作成しています。
Ajaxからの戻り値を判断して、次の画面に進むかどうかを判定したいです。

発生している問題・エラーメッセージ

alert は表示されるのですが、falseで、次に進まないはずの場合も次の画面に進んでしまいます。

該当のソースコード

JavaScript
1$("#form").submit(function() {
2	var url = 'url';
3    var postData = {
4		type: "login",
5		name: 'name',
6		pass: 'password'
7	};
8	var $p = $.post(url , postData ,function(data) {
9		if(data.istrue){
10			return true;
11		}else{
12			alert('ユーザー名・パスワードが違います。');
13			return false;
14		}
15	});
16	return $p; 
17});

試したこと

戻り値ではなく、直接
$('#form').submit();
を使用したりしたのですが、うまくいきませんでした。

退会済みユーザー

2020/08/23 09:28

非同期だからだと思いますけど。

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

回答1件

ベストアンサー

修正依頼で SurferOnWwwさんが書いていらっしゃる通り、$.post は非同期で実行されるためです。
質問文のコードでは、 $p に jqXHRオブジェクトが入ってしまいます。

$.ajaxを使って、async = false とする手もあるのですが、ブラウザのコンソールに警告が出てしまいますのでおすすめできません。

仕方がないので面倒ですが、 $(form).submit で、一度 submitをキャンセルしてしまい、改めてajaxリクエストを行い、OKであれば改めてSubmitさせる。という処理にしてみました。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8"></meta>
5    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
6    <title>Document</title>
7    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
8</head>
9<body>
10
11<form id="form" method="GET">
12    <input type="text" value="login" />
13    <button type="submit" >submit</button>
14</form>
15
16<script>
17    function beforeSubmitCheck() {
18        var url = 'https://httpbin.org/post';
19        var postData = {
20            type: "login",
21            name: 'name',
22            pass: 'ng'
23        };
24        $.post(url , postData ,function(data) {
25            if (data.form.pass == 'ok') {
26            //if(data.istrue){
27                $("#form").off('submit');  // submitのイベントハンドラを削除
28                $("#form").submit();       // submit
29                return true;
30            }else{
31                alert('ユーザー名・パスワードが違います。');
32                return false;
33            }
34        });
35    }
36
37    $("#form").submit(function() {
38        beforeSubmitCheck();
39        return false; 
40    });
41</script>
42</body>
43</html>