为什么我的JavaScript搜索功能重定向到“http：// localhost：8090 /？”？

Question

我正在创建一个网络服务器，目前正在http：// localhost：8090上托管。 它由HTML文件，server.js和client.js文件组成。 我已经设法在客户端和服务器之间建立了完全满足我需求的通信。 我的问题在于，当我点击我的搜索按钮时，一切都很好，除了某些原因它会将页面重定向到' http：// localhost：8090 / ？' 当我需要它继续' http：// localhost：8090 / '时，它可以动态更新HTML。

我进行了广泛的搜索，发现没有任何类似于我的问题。 我发现了这个问题https://stackoverflow.com/a/2647601/5264986但是每次页面想要转到不同的地址时都会出现一个对话框，这不是我需要的。 我已经完成了所有代码，并且没有指向此位置的重定向或href。 我已经将它缩小到client.js中的这个函数：

function search(){

    var search = document.getElementById('txt_field').value; 

    fetch('/search', {
        headers: {text: search}
    })
        .then(response => response.json())
        .then(function(data) {

            // CODE HERE TO DYNAMICALLY UPDATE HTML

        })
        .catch(error => console.error(error));

}

在我的服务器中，所有发生的事情是：

app.get('/search', function(req, res){

    var text = req.get('text');
    var url = 'https://api.spotify.com/v1/search?q=name:'+text+'&type=track';
    var content = httpGet(url);
    res.send(content);

});

其中httpGet是xmlhttprequest。

编辑

这是搜索按钮的html：

<button id="send_btn" class="btn btn-outline-secondary my-2 my-sm-0"><img src="./images/search.png" width="30"></button>

在client.js中这是触发它的原因：

document.getElementById('send_btn').onclick = search;

编辑结束

它将内容发送回客户端，但由于某种原因，它会重定向到：8090 /？ 它重新加载html文件并覆盖动态html。 任何指向正确方向的人都会非常感激。

Answer 1

将preventDefault添加到事件处理程序。 我假设单击按钮时会调用函数search 。 如果是这样，那么你需要传递如下事件：

 function search(evt){ evt.preventDefault(); // <-- var search = document.getElementById('txt_field').value; fetch('/search', { headers: {text: search} }) .then(response => response.json()) .then(function(data) { // CODE HERE TO DYNAMICALLY UPDATE HTML }) .catch(error => console.error(error)); } 

preventDefault会告诉浏览器不要执行按钮的默认操作，即提交表单。

因此， preventDefault让浏览器知道您不希望它提交表单，从而防止重定向发生。