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

Question

我有一个也许简单的问题。<a>标签和带有任何元素的普通 GET 请求之间有什么区别。我知道该<a>标签会自动将您发送到其属性中指定的 url href。所以我假设 Get 请求在其成功回调中执行类似的操作（如下所示）

但是，假设我还想在<span>单击示例元素时发送一些信息以及正常的获取请求，因此我写道：

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

        }
    });
});

有什么办法可以通过<a>标签来实现这一点吗？将信息发送到服务器，以便它可以在req.query.title和req.query.email?

执行ajax上面的请求将运行app.get('/someurl',(req,res)=>{})两次，因为我正在发送 GET 请求来发送数据（标题和电子邮件），然后当我写window.location = '/someurl'如何重做此操作时，我会发出另一个 GET 请求，以便它只发送 GET 请求一次，但是还允许向对象发送和存储信息req并确保浏览器现在正在显示/someurl.

Answer 1

只需在您放入标签的 href 中的 URL 中创建适当的查询字符串<a>，它就会像您的 ajax 调用一样工作。假设someTitle的值为"The Hobbit"，someEmail的值为foo@whatever.com，那么您可以像这样构造该 URL：

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

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

下面的表格显示了查询字符串组件中必须替换的字符（ after&或 after的部分=）：

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

<a>标签可以被各种可能读取您的页面的机器所理解，例如残疾人的屏幕阅读器或为您的网站建立索引的爬虫。此外，它们还可以在浏览器键盘支持下自动工作，按住 Ctrl 键单击即可打开新选项卡。而一段 Javascript 可能不会自动支持任何该功能。因此，基本上，如果<a>标签可以满足您的需要，那么它就会受到广泛的青睐，因为它具有许多其他默认功能，这些功能对于用户来说可能是必需的或方便的。