JavaScriptのsubmitの完了を待つ方法
Q&A
解決したいこと
JavaScriptで、フォーム送信の完了を待ってから、Ajax通信を行う方法を知りたいです。
(同じ要素のクリックで、submitでデータベースの更新を行った最新のデータをfetchAPIで取得したいです。)
該当するソースコード
<form action="post" name="formTest">
<button type="button" onclick="A(B)" id="test">test</button>
</form>
<script>
function A(B) {
formTest.submit();
B();
}
function B() {
fetch("test.php",
{
method: "GET",
headers: { "Content-Type": "application/json" }
}
)
.then(function (response) {
if (!response.ok) {
throw new Error(response)
}
return response.json();
})
.then(function (data) {
if (parseInt(data.check) === 1) {
window.alert('success')
}
})
.catch(function (error) {
console.log(error);
});
}
</script>
自分で試したこと
上記コード例で、JavaScriptが実行順の通りに動きはするのですが、データベースが更新される前に、fetchAPIがデータを取得してきてしまいます。