如何從單擊事件對象獲取鏈接的href屬性的參數

Question

是否有一種簡單方法可以使用click事件對象獲取單擊鏈接的href屬性末尾的參數？

我有一些jQuery代碼看起來像這樣：

$(document).ready(function() { 
    $('#pages').delegate("a", "click", function(e) { 
     var formData = "parameters to clicked link"; 
     $.ajax({ 
      url: 'friends2.php', 
      dataType: 'json', 
      data: formData, 
      success: function(data) { 
       $('#searchbutton').attr("disabled", false); 
       $('#searchresults').html(data.results); 
       $('#pages').html(data.paginate); 
      } 
     });//ajax end 
     return false; 
    }); 
}); 

這裏是相關的HTML：

<div id="pages"> 
<span class="disabled">previous</span> 
<span class="current">1</span> 
<a href="friends.php?term=ma&p=2">2</a> 
</div> 

我試圖做的是分頁搜索的結果我已經完成了Ajax。搜索運行良好，並獲得與查詢匹配的用戶列表。創建分頁鏈接的結果腳本部分也在工作。

在上面的例子中，有兩頁結果。當用戶點擊鏈接轉到結果頁面2時，我想要執行的操作是攔截鏈接點擊，並使用term=ma&p=2作爲傳遞到請求的數據創建新的ajax請求。

因此，長話短說，有沒有一種簡單的方法可以讓term=ma&p=2從事件對象通過我上面的jQuery中的匿名函數？

Answer 1

可以使用this.href方法讀取鏈接屬性：

$('#pages').delegate("a", "click", function(e) { 
    var str = this.href.split('?')[1]; 

例子：

str = 'friends.php?term=ma&p=2'; 
console.log(str.split('?')[1]); // output: term=ma&p=2 

Answer 2

jQuery本身不支持URL解析。然而，有很多可用的jQuery擴展可以完成這個任務。例如

• https://github.com/allmarkedup/jQuery-URL-Parser

有了這個擴展，你可以做以下

$('#pages').delegate("a", "click", function(e) { 
    var href = $(this).attr('href'); 
    var url = $.url(href); 
    var query = url.attr('query') 
    ... 
}); 

擴展本身支持不僅僅是查詢字符串等等。您幾乎可以在網址的每個部分使用attr。

Answer 3

是的，你可以使用鏈接的.search財產...

alert(this.search); 

---

DEMO：http://jsfiddle.net/sHqmF/

---

爲了擺脫?的，只是.slice()它...

this.search.slice(1) 

---

DEMO：http://jsfiddle.net/sHqmF/1/

Answer 4

發展Sarfraz答案，給出一個錨

<a class="the_link" href="http://www.example.com/?a=1&date=2014-7-30&cat=all">click here</a> 

你可以得到的查詢參數

jQuery(document).ready(function($) { 
    $('a.the_link').click(function(){ // when clicking on the link 
    var href = $(this).attr('href'); // get the href of the anchor 
    var params = get_params_from_href(href); 
    console.log(params);    // OUTPUT: [a: "1", date: "2014-7-30", cat: "all"] 
    return false;      // optional. do not navigate to href. 
    }); 

    function get_params_from_href(href){ 
    var paramstr = href.split('?')[1];  // get what's after '?' in the href 
    var paramsarr = paramstr.split('&');  // get all key-value items 
    var params = Array(); 
    for (var i = 0; i < paramsarr.length; i++) { 
     var tmparr = paramsarr[i].split('='); // split key from value 
     params[tmparr[0]] = tmparr[1];  // sort them in a arr[key] = value way 
    } 
    return params; 
    } 
}