試圖弄清楚如何執行 ajax 調用以防止提交按鈕重新加載整個頁面

Question

我有這個 url 頁面，一旦提交發送密鑰就會重新加載。 我需要添加一個 ajax 調用來調用一行文本，如下所示

非常感謝您的反饋..

我已將該行放在id="fd-bk"的 div 中

 <form method="POST" th:action="@{/__${page}__}" th:object="${client}" class="contact-form" onsubmit="return validateForm()"> <div class="row"> <div class="col span-1-of-1"> <div id="fd-bk" class="alert alert-info" th:if="${emailSent}"> Your feedback is greatly appreciated. </div> </div> </div> <div class="row"></div> <div class="row"> <div class="col span-1-of-3"> <label for="name">Name</label> </div> <div class="col span-2-of-3"> <input type="text" name="name" id="name" placeholder="Your Name" th:field="*{name}" required> </div> </div> <div class="row"> <div class="col span-1-of-3"> <label for="email-cnt-rfl">Email</label> </div> <div class="col span-2-of-3"> <input type="email" name="email" id="email-cnt-rfl" placeholder="Your Email" th:field="*{email}" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[az]{2,}$" size="20" required> </div> </div> <div class="row"> <div class="col span-1-of-3"> <label>Drop us a line</label> </div> <div class="col span-2-of-3"> <textarea name="message" placeholder="Your Message" th:field="*{message}" required></textarea> </div> </div> <div class="row"> <div class="col span-1-of-3"> <label>&nbsp;</label> </div> <div class="col span-1-of-3"> <input type="submit" value="Send It!" onclick="scrollSmoothToBottom()"> </div> </div> </form>

Answer 1

將此 makeCall() 包含在

<form>
<div class="col span-1-of-3">
                            <input type="submit" value="Send It!"
                                   onclick="scrollSmoothToBottom()">
                        </div>
</form>


function makeCall() {
    const form = document.querySelector('#form');

    form.addEventListener('submit', e => {
         
        const message = document.querySelector('.hidden.alert-info');
        message.classList.remove('hidden');
         
    });
}