2017-04-02 116 views
1

我有一個可能很簡單的問題。 <a>標籤和任何元素的正常GET請求之間有什麼區別。我知道<a>標記會自動將您發送到其href屬性中指定的網址。所以我假設一個Get請求在成功回調方面做了類似的事情(如下所示)<a>標籤和獲取請求之間的區別

但是,假設我還想在一個例如<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請求發送數據(標題和電子郵件),然後當我寫window.location = '/someurl'我正在另一個GET請求,我怎麼能重做這使得它只發送GET請求ONCE,但也允許發送和存儲信息到req對象並確保瀏覽器現在正在顯示/someurl

回答

2

只需創建你把<a>標籤的href URL上的查詢字符串,它會工作就像你的Ajax調用。假設someTitle"The Hobbit"someEmail值有[email protected]的價值,那麼你就可以構建一個URL是這樣的:有

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

一些非字母字符在URL中逃脫。在上面的網址中,空格替換爲%20,@替換爲%40。在您的特定示例中,您可以打開Chrome調試器中的網絡選項卡,並查看Chrome爲您的ajax調用發送的EXACT URL,將其複製到剪貼板並將其插入到<a>標記中。

這裏有一個表,其中顯示的字符有什麼在查詢字符串組件進行更換(部分&後或=後):

enter image description here

我剛剛從疑惑然後,一邊語義原因,使用標籤而不是其他任何其他優點是否有其他優勢?

<a>標籤是由各種可能閱讀網頁內容如屏幕閱讀器的禁用或爬蟲索引你的網站的機器理解。另外,它們在瀏覽器鍵盤支持下自動運行,按住Ctrl鍵點擊打開一個新選項卡。而一段Javascript可能不會自動支持任何功能。所以,基本上,如果<a>標籤可以做你需要的東西,那麼它是廣泛的首選,因爲它有很多其他的默認功能對用戶來說可能是必需的或者方便的。

+1

@JohnSnow - 我在你的評論中提出的額外問題增加了信息。 – jfriend00

+0

我改變了正確的答案,因爲這是一個更完整的答案,但另一個也是正確的。 – JohnSnow

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

我只是想知道,除了語義原因,使用標籤而不是其他任何其他優點嗎? – JohnSnow

相關問題