Javascript Chrome在XMLHttpRequest之后自动刷新页面

我对谷歌浏览器有一些奇怪的问题。我为我的网站建立了一个搜索域。因此，我实现了一些JS来获取和处理结果（见下文）。问题是，当我第一次使用chrome进入页面并使用带有“enter键”的搜索时，chrome会执行以下操作（来自我的服务器的请求）：

一个Firefox（也带有“Enterkey”）或使用“搜索按钮”的Chrome，看起来就不同了，就像这样

[10/Nov/2017 10:00:59] "GET /api/searchCourse/daf/ HTTP/1.1" 200 95 (entering the page)
[10/Nov/2017 10:00:59] "GET /app/student/home/? HTTP/1.1" 200 737 (search request)

我也试着用Chrome调试这个问题，但它的行为与它应该的一样。此外，我必须补充，这只发生在我第一次进入登录后的页面。当我刷新页面时，效果很好。有人能解释这种行为吗

我的JS代码：

var btnSearch = document.querySelector('.search').addEventListener('click', searchCourse);
var txtFieldSearch = document.getElementById('searchField').addEventListener('keydown',                 
    function (e) {
        var key = e.which || e.keyCode;
        if (key === 13) {
            searchCourse();
        }
    }
);

function searchCourse() {
    document.querySelector('.my-node').style.display = 'none';
    var input = document.getElementById('searchField').value;
    var url = '/api/searchCourse/';

    if (input.length < 3) {
        showSearchWarining('Please enter more than 3 letters.');
        return;
    }

    var xhr = new XMLHttpRequest();
    xhr.open('GET', url + input, true);
    xhr.onload = function (e) {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                console.log(xhr.responseText);
                addResults(xhr.responseText);
            } else {
                console.error(xhr.statusText);
            }
        }
    };
    xhr.onerror = function (e) {
        console.error(xhr.statusText);
    };
    xhr.send(null);
}

var btnSearch=document.querySelector（'.search'）.addEventListener（'click'，search'）；
var txtFieldSearch=document.getElementById（'searchField'）。addEventListener（'keydown'，
职能（e）{
var key=e.which | e.keyCode；
如果（键===13）{
searchCourse（）；
}
}
);
函数searchCourse（）{
document.querySelector（'.my node'）.style.display='none'；
var输入=document.getElementById（'searchField'）。值；
var url='/api/searchCourse/'；
如果（输入长度<3）{
ShowSearchWaring（'请输入3个以上的字母'）；
返回；
}
var xhr=new XMLHttpRequest（）；
xhr.open（'GET'，url+输入，true）；
xhr.onload=函数（e）{
if（xhr.readyState==4）{
如果（xhr.status==200）{
console.log（xhr.responseText）；
添加结果（xhr.responseText）；
}否则{
控制台错误（xhr.statusText）；
}
}
};
xhr.onerror=函数（e）{
控制台错误（xhr.statusText）；
};
xhr.send（空）；
}

看起来Chrome正在提交表单-您是否尝试在单击处理程序或表单提交处理程序中阻止调用进一步的事件处理？

当按下enter键时，Chrome似乎正在提交按钮表单-您是否尝试在单击处理程序或表单提交处理程序中使用event.preventDefault（）？您好，是我的错。多亏了你，Joschi，它真的起作用了。但是你能解释一下event.preventDefault（）的作用吗？没有从Mozilla得到解释。@Joschi，如果您愿意，将其作为解决方案发布，以便我可以将其标记为solutionOk，并为preventDefault（）添加指向mdn文档的链接。它基本上阻止了事件的默认浏览器行为。好吧，它会阻止默认事件处理，但为什么它不只在chrome上工作？在Firefox上，它工作得很好。

var btnSearch = document.querySelector('.search').addEventListener('click', searchCourse);
var txtFieldSearch = document.getElementById('searchField').addEventListener('keydown',                 
    function (e) {
        var key = e.which || e.keyCode;
        if (key === 13) {
            searchCourse();
        }
    }
);

function searchCourse() {
    document.querySelector('.my-node').style.display = 'none';
    var input = document.getElementById('searchField').value;
    var url = '/api/searchCourse/';

    if (input.length < 3) {
        showSearchWarining('Please enter more than 3 letters.');
        return;
    }

    var xhr = new XMLHttpRequest();
    xhr.open('GET', url + input, true);
    xhr.onload = function (e) {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                console.log(xhr.responseText);
                addResults(xhr.responseText);
            } else {
                console.error(xhr.statusText);
            }
        }
    };
    xhr.onerror = function (e) {
        console.error(xhr.statusText);
    };
    xhr.send(null);
}