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

Question

我正在创建一个网络服务器，目前托管在 http://localhost:8090. It consists of an HTML file, a server.js and a client.js file. I have managed to set up communication between the client and the server perfectly for my needs. My problem lies in that when I click on my search button, everything executes fine except for some reason it will redirect the page to 'http://localhost:8090/?' when I need it to stay on 'http://localhost:8090/' 上，用于动态更新 HTML.

我进行了广泛的搜索，没有找到与我的问题相似的内容。我发现了这个问题，但是每次页面想要转到不同的地址时都会弹出一个对话框，这不是我需要的。我已经检查了所有代码，没有指向该位置的重定向或 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 让浏览器知道您不希望它提交表单，从而防止发生重定向。

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

Why is my JavaScript search function redirecting to "http://localhost:8090/?"?

html

javascript

redirect

client

server

编辑

编辑结束