如何获得我的AJAX响应以执行点击事件？

Posted 2021-04-27

我有一个要在表单上使用的ajax调用，因此用户不必重新加载页面，但它只会继续加载。我试图更改发布路线，但没有成功。有人可以指出我正确的方向。这是我的代码：

html
const http = new XMLHttpRequest();
const submit = document.querySelector('.submit');

http.onload = () => {
    submit.addEventListener('click', () =>{
        const alertMessage = document.querySelector('.alert');
        const email = document.querySelector('#email').value;
        const name = document.querySelector('.name').value;
        if (name === '' || email === '') {
                    alertMessage.innerHTML = 'Name And Email Required';
                    console.log(name)
                } else {
                    alertMessage.innerHTML = 'Success! Someone will be in touch with you soon!'
                    // email.value = '';
                    // form.reset();
                }
    });
}

http.open('POST', '/index.html', true);
http.send();

FORM 
   <div class="contactform">
                <div class="alert"></div>
                <form action="/index.html" method="POST" class="form">
                    <input type="text" name='name' id='name' placeholder="Name">
                    <input type="email" name='email' id='email' placeholder="Email">
                    <textarea class="messages" name="messages" placeholder="Message...."></textarea>
                    <button class="submit" type="submit" value="submit">Send</button>
                </form>
            </div>

答案

您需要重写表单的onsubmit事件以防止提交：

$("formSelector").bind('submit', function (e) {
    var isValid = someYourFunctionToCheckIfFormIsValid();
    if (!isValid) {
        e.preventDefault();
        return false;
    } else {
        jQuery.ajax({
            type: "POST",
            url: "my_custom/url",
            dataType: "html",
            data: { "text": jQuery("#edit-body").html()
            },
            success: function (result) {
                console.log(result);
            }
        });
        e.preventDefault();
        return false;
    }
});

通过致电

e.preventDefault();
return false;

您防止发生同步回发。

更新：如果您不想覆盖表单提交，也许可以将按钮放在表单标签之外（如果需要，可以使用CSS调整位置）？