*はじめに追記（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 を追加しました。現状、サーバからのレスポンス到着を待っての処理でいいので、とりあえず解決したと思います。
そもそも、非同期通信が原因かどうかも怪しいところでありました。
別の手法を考えます。