如何单击 href 链接但阻止链接页面显示

Posted 2023-03-05

【中文标题】如何单击 href 链接但阻止链接页面显示

【英文标题】：How can you click an href link but block the linked page from displaying

【发布时间】：2022-01-22 14:18:41

【问题描述】：

标题中很难概括我的问题。

我重写了一个广泛使用 javascript 的个人网页。我正在简化事情（或者我希望如此）。

我使用具有 REST 接口的家庭自动化服务器。我可以发送诸如“http://192.168.0.111/rest/nodes/7%2032%20CD%201/cmd/DON”之类的命令来打开灯。我正在使用 href 标记将链接放在我的简化网页上。问题是它打开了rest界面页面并显示了XML结果。我想避免显示该页面。即，当您单击链接时，它会“转到”链接但不会更改页面。

这似乎应该/不可能，但我学会了不要低估社区。​​p>

有什么想法吗？

【问题讨论】：

使用ajax发送请求

【参考方案1】：

如果您的浏览器足够现代，您可以使用fetch 函数：

document.querySelector(lightSelector).addEventListener('click', e => 
 e.preventDefault(); // prevent the REST page from opening
 fetch(lightURL).then // put promises here
)

变量 lightSelector 和 lightURL 应该在某个地方定义。

代码会监听链接上的点击，当点击时，我们会阻止 REST 页面打开（您的意图），然后我们使用 fetch 向您的轻量级 URL 发送请求。您可以使用then 添加一些承诺来处理响应（例如打印“light on”或“light off”），但这是另一回事。

如果您将“链接”设置为按钮，则可以去掉阻止 REST 页面打开的部分 e.preventDefault();。

【讨论】：

谢谢。您能否以简单的 html 页面格式向我展示此内容，因为我的技能非常有限。给定控制器的 URL 192.168.0.123 和设备地址“20 7F A4 1”，该命令将类似于 192.168.0.123/rest/cmd/20 7F A4 1/DON 来打开它。如果我想要一个简单的打开灯链接，网页会是什么样子？跨度>

@Mark 你好，你不需要以任何方式调整 HTML 来完成这项工作。您只需添加 JavaScript 代码。