52238


jQueryを利用してAjaxでデータ登録をしたいときに、alert()を呼び出す場合は、問題なくデータを登録することができますが、alert()を呼び出さない場合はデータの登録に失敗します。

[code]

    $.ajax({
        url: 'https://xxx',
        type: 'POST',
        dataType: 'json',
        data: JSON.stringify(form_data),
    })
    .done(function(data){
        console.log("登録完了")
    }).fail(function(jqXHR, textStatus){
        console.log("登録失敗")
    });
    alert("END") // ここをコメントアウトするとデータは登録できない
    
[/code]

この`alert()`の部分が`console.log()`でも`setTimeout()`でもだめで、`alert()`でなければ動きません。なぜ`alert()`のみがうまく動くのかわかりません。

ちなみに、`.done()`と`.fail()`はデータが登録できたorできなかったにかかわらず、呼び出されません。ここも不思議でなりません。

`$.ajax()`の中に以下のようにしてもログは出ませんでした。

[code]

    $.ajax()({
        success: function(result){
            console.log('my message' + result);
        }
    })
    
[/code]

話が脱線しましたが、なぜ`alert()`を呼び出す場合は登録が成功するかがわかりません。

回答をお待ちしております。


CC BY-SA 4.0
2019-01-22T05:55:35.847
52196
2019-01-23T05:27:15.630
2019-01-22T06:00:53.867
28291
28291
question
javascript jquery
$.ajaxの終了後にalert()を呼び出さないとデータの登録がされない


すみません、自己解決しましたので回答します。  
`e.preventDefault();`を置くことで対応できました。

[code]

    $.ajax({
        ...
    })
    .done(function(data){
        console.log("登録完了")
    }).fail(function(jqXHR, textStatus){
        console.log("登録失敗")
    });
    e.preventDefault();
    
[/code]

`e.preventDefault();`と`alert()`の違いについて考察をしようと思います。


CC BY-SA 4.0
2019-01-22T06:37:19.747
52199
2019-01-22T06:37:19.747
28291
52196
answer


XHR
(`$.ajax()`)は非同期処理ですので、実行したあとにある程度時間があかないと送ったデータがサーバまで届きません。おそらく、イベントループに入るまでブラウザは何もしないのではないかと思います。

■ `alert()` も `e.preventDefault()`もない場合 →
XHRのリクエストが処理されれる前にフォームが送信され、XHRを要求したHTML文書自体がXHRの要求ごと消える。

■ `alert()` を入れた場合 → ダイアログを表示してイベントループに入り、XHRの要求が実行される。

■ `e.preventDefault()`がある場合 → フォーム送信されないので、HTML文書が生き残り、XHRの要求も処理される。


CC BY-SA 4.0
2019-01-23T05:27:15.630
52238
2019-01-23T05:27:15.630
3475
52196
answer