*はじめに追記（2025/2/8）
・input type="submit" をjavascript で関数を実行する際に使うのはどうか？
・async : falseは現在非推奨のようだ
という懸念点が分かったため、お役に立つことは難しいかと・・・。

当方、Jqueryを用いてサーバとhtml通信を行っていますが、「XHR の読み込みに失敗しました」というエラーなのかどうかも分からないメッセージに悩まされたので、その状況を越えた件について報告します。

状況

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>To Do リスト</title>
</head> 

<body>

  <form>
  <input type="text" id="textdata">	       
  <input type="submit" id="postdata" value="追加">  			
  </form>
  
  <hr>	
　　　
  <div id="list">
  </div>

  <script src="./jquery-3.7.1.min.js"></script>
  <script> 

  $("#postdata").click(function(){
 
     let dt = new Date();
     let dt_str = String(dt);	
     let text = document.getElementById("textdata").value;
          	     	
     $.ajax({
        	url:'http://localhost/cgi-bin/gettextdata.py',
        	type:'post',
        	data:{"date":dt_str,"text":text},
    	})
    	.done(function(){
        alert("success");
    	})
    	.fail(function(){
        alert("failed");
    	});            
     });

  </script>
	 
</body>
</html>

ブラウザ上で、「追加」ボタンを押しても、"success"とも"fail"とも表示されず、明確なエラーメッセージもありません。コンソール上で「XHR の読み込みに失敗しました」というメッセージが出ます。

どうしたか

調べたところによると、ajaxが非同期通信であることが関係している模様。
23行目「$.ajax」関数のdata: ～　の行の下に、async:false を追加しました。現状、サーバからのレスポンス到着を待っての処理でいいので、とりあえず解決したと思います。

そもそも、非同期通信が原因かどうかも怪しいところでありました。
別の手法を考えます。