我正在创建一个网络服务器,目前托管在 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。 任何指向正确方向的指示都将不胜感激。
最佳答案
将 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 - 为什么我的 JavaScript 搜索功能重定向到 "http://localhost:8090/?"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55617554/