Question

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

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

一个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);
}

Answer 1

看起来Chrome正在提交表单 - 您是否在点击处理程序或表单提交处理程序中尝试event.preventDefault()以防止进一步调用事件处理？

Chrome在XMLHttpRequest之后自动刷新页面

1 个答案: