<a>标签和GET请求的区别

Question

我有一个可能很简单的问题。使用<a>标签和使用普通GET请求有什么区别？我知道<a>标签会自动将你发送到其href属性中指定的URL。所以我认为，当成功回调（如下所示）时，GET请求也会执行类似的操作。

但是假设我想在单击某个元素（例如<span>）时，同时发送一些信息以进行普通的get请求，那么我应该如何编写代码：

   $('span').click(() => {
    $.ajax({
        url: '/someurl',
        type: 'GET',
        data: {
            title: someTitle,
            email: someEmail
        },
        success: (data) => {
                window.location = '/someurl';

        }
    });
});

有没有使用标签实现这个的方法？将信息发送到服务器，以便在req.query.title和req.query.email中可用？执行上面的ajax请求会使我的app.get（'/ someurl'，（req，res）=> {}）运行两次，因为我正在发送GET请求以发送数据（标题和电子邮件），然后当我写window.location ='/someurl'时，我又发起了另一个GET请求。如何重新设计它，使得它仅发送一次GET请求，同时还允许向req对象发送和存储信息，并确保浏览器现在显示/someurl。

- JohnSnow

Answer 1

只需在href属性中放入适当的查询字符串，就可以像使用ajax调用一样运行。假设 someTitle 的值为"霍比特人"， someEmail 的值为[e-mail]，则可以构建如下的URL：

<a href="/someurl?title=The%20Hobbit&email=foo%40whatever.com">Click Me</a>

一些非字母字符必须在URL中进行转义。在上面的URL中，空格被替换为%20，@ 被替换为 %40。在您的特定示例中，您可以打开Chrome调试器中的网络选项卡，查看Chrome发送的确切URL，将其复制到剪贴板中，并将其插入到您的 <a> 标记中。

下面是一个表格，显示了查询字符串组件（& 或 = 后面的部分）必须被替换的字符：

那么，除了语义原因之外，使用 a 标签还有其他优点吗？

所有可能读取您页面的机器都能理解 <a> 标签，例如用于残疾人士的屏幕阅读器或索引您站点的爬虫。此外，它们可以自动与浏览器键盘支持一起工作，Ctrl + 单击以打开新选项卡。而一段Javascript可能不会自动支持任何这些功能。因此，如果 <a> 标记可以满足您的需求，它是被广泛推荐的，因为它具有许多其他默认功能，这对用户来说可能是必要或方便的。

- jfriend00

---

@JohnSnow - 我在你的评论中添加了有关额外问题的信息。 - jfriend00

我更改了正确答案，因为这是一个更完整的答案，尽管另一个也是正确的。 - JohnSnow

Answer 2

<a href="/someurl?title=Hello&email=tom%40home.com">Hello</a>

- Jason Livesay

---

我只是想知道，除了语义原因之外，使用a标签是否还有其他优点？ - JohnSnow