为什么我的 JavaScript 搜索功能重定向到 "http://localhost:8090/?"？

Question

我正在创建一个网络服务器，目前托管在 http://localhost:8090 上。它由一个HTML文件，一个服务器和一个客户端.js文件组成.js一个。我已经设法在客户端和服务器之间完美地设置了通信，以满足我的需求。我的问题是，当我单击搜索按钮时，一切都执行正常，除非出于某种原因，当我需要它保持在"http://localhost:8090/"上以动态更新 HTML 时，它会将页面重定向到"http://localhost:8090/？

我进行了广泛的搜索，没有发现与我的问题相似的内容。我发现这个问题 https://stackoverflow.com/a/2647601/5264986 但是每次页面想要转到不同的地址时，这都会弹出一个对话框，这不是我需要的。我已经浏览了我的所有代码，没有指向此位置的重定向或 href。我已经将其缩小到客户端中的此功能.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>

在客户端中.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让浏览器知道您不希望它提交表单，从而防止重定向发生。