<a>标签和获取请求之间的区别

我有一个可能很简单的问题。 什么是<a>标签和任何元素的正常GET请求之间的区别。 我知道<a>标签会自动将您发送到在其href属性中指定的url。 所以我假定Get请求在成功callback中做了类似的事情(如下所示)

但是让我们说,我也想发送一些信息,当一个例如<span>元素被点击,所以我写:

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

有没有办法用<a>标签来实现这一点? 将信息发送到服务器,以便在req.query.titlereq.query.email可用?

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

只需在您放入<a>标记的href中的URL中创build适当的查询string,就可以像ajax调用一样工作。 假设someTitle的值是"The Hobbit"someEmail的价值是foo@whatever.com ,那么你可以像这样构造这个URL:

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

一些非字母字符必须在URL中转义。 在上面的URL中,空格被%20replace, @replace为%40。 在您的特定示例中,您可以在Chromedebugging器中打开networking选项卡,并查看Chrome为您的ajax调用发送的EXACT URL,将其复制到剪贴板并将其插入到<a>标记中。

下面是一个表格,显示了查询string组件(后面的部分&后面的部分)中的哪些字符必须replace:

在这里输入图像描述

我只是想知道,除了语义的原因,使用标签而不是其他的优点吗?

各种可以读取您的页面的机器都可以理解<a>标签,例如禁用的屏幕阅读器或为您的网站编制索引的抓取工具。 另外,他们自动使用浏览器键盘支持,按住Ctrl键点击打开一个新标签页。 而一块Javascript可能不会自动支持任何function。 所以,基本上,如果<a>标签可以做你需要的东西,那么它是广泛的首选,因为它有很多其他的默认function对用户来说可能是必须的或者方便的。

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