ラボ > Javascript関連:ajax、form

js ajax+form送信で「abort」が「Uncaught TypeError」

ajaxで成功時にform.send()するとabortが読み込めない的なコトを言われた

作成日:2020-04-20, 更新日:2020-04-20

経緯

・form送信前にajaxで少し確認ってのをやっていた。
・ajaxの戻り値には問題無く、その後のform送信で何かのエラーが出ていた。
・form送信自体は問題なく先に進めていたので・・・エラーに気づかないまま月日を過ごしていた。

出力されていたエラー

Uncaught TypeError: Cannot read property 'abort' of undefined

対応等

▼問題となるソース(下記のような感じ)

$.ajax({
  url: xxxx,
  type: 'POST',
  ~ 略 ~
  success: function(data){
    if ( data.status ) {
      form.submit();
      return true;
    }
    else {
      ~ 略 ~
      return false;
    }
  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
    ~ 略 ~
  }
});

▼実行すると「form.submit();」の中に入って下記のようなエラー

Uncaught TypeError: Cannot read property 'abort' of undefined

▼「abort・・・? そんなの使ってない・・・」と思いつつ探したら使ってた。

$("body").on("ajaxSend", function(c, xhr) {
  $( window ).on( 'beforeunload', function() {
    xhr.abort();
  })
});

▼「xhr」に「abort」が無い的な意味合いになるみたいで、下記のようにすればOK

$("body").on("ajaxSend", function(c, xhr) {
  $( window ).on( 'beforeunload', function() {
    xhr && xhr.abort();
  })
});

めも

数年前に作ったソースだから・・・「xhr.abort()」を使った経緯がまったくもって思い出せない。