Question

谷歌搜索如何实现这一目标很困难，因为每个人似乎决定让你现在使用jQuery执行每一个简单的任务。我在我的网站上获得了丰富的经验，并竭尽全力避免不必要地使用jQuery，现在我已经来到联系表单，我有点难过。

在之前的网站上，我使用jQuery提交表单而不刷新页面，然后获取结果并将其显示在表单下的div中。现在我想在没有jQuery的情况下实现相同的效果。这是我之前使用的代码：

$('#contactform').submit(function(event) {
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "contact.php",
        data: $(this).serialize(),
        success: function(data){
            $('#result').html(data);
        }
    });
});

有人可以帮助我在纯JS中实现这一目标吗？这是我网站上最后一件需要JavaScript的东西所以我真的不想现在调用jQuery这么简单，因为我所有的努力都是为了编写可爱的滚动到顶部按钮，视网膜图像替换，滑块和拖放没有它的下来菜单都是徒劳的......

Answer 1

document.querySelector('#contactform').submit = function(event) {
    event.preventDefault();
    var xhr = new XMLHttpRequest();
    xhr.open('POST', "contact.php", true);
    xhr.data = this.serialize();
    xhr.onload = function(data){
            document.querySelector('#result').innerHTML = data;
        }
    xhr.send();
};

Haven没有测试过这个，但上面的内容应该会让你知道如何做到这一点。

表单提交和检索结果没有jQuery

1 个答案: