试图弄清楚如何执行 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');
         
    });
}