<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';

        }
    });
});

有什么方法可以用 <a> 标签来实现吗？将信息发送到服务器以便在 req.query.title 和 req.query.email 中可用？

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

Answer 1

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

Answer 2

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

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

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

这里有一个 table 显示查询字符串组件中必须替换的字符（& 之后或 = 之后的部分）：

I'm just wondering then, aside from semantic reasons, is there any other advantages to using an a tag instead of anything else?

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

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

Difference between the <a> tag and get request

html

anchor

get

node.js