Jak uzyskać parametry atrybutu href łącza z obiektu zdarzenia kliknięcia?

Question

Czy istnieje prosty sposób uzyskania parametrów na końcu atrybutu href klikniętego łącza za pomocą obiektu zdarzenia kliknięcia?

Mam niektóre kodu jQuery, który wygląda tak:

$(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; 
    }); 
}); 

A oto istotne 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> 

Co usiłuję zrobić jest podzielony na strony wyników wyszukiwania, które Zrobiłem z ajaxem. Wyszukiwanie działa dobrze, a otrzymasz listę użytkowników pasujących do zapytania. Działa również część skryptu wyników, która tworzy łącza stronicowania.

W powyższym przykładzie są dwie strony wyników. Co chcę zrobić, gdy użytkownik kliknie łącze, aby przejść do strony 2 wyników, to przechwycić kliknięcie łącza i zamiast tego utworzyć nowe żądanie ajax, używając term=ma&p=2 jako danych przekazanych do żądania.

Krótko mówiąc, czy istnieje prosty sposób na uzyskanie term=ma&p=2 z obiektu zdarzenia przekazanego anonimowej funkcji w powyższym jQuery?

Answer 1

Można użyć metody this.href czytać atrybut link:

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

Przykład:

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

Answer 2

jQuery nie obsługuje parsowania adresów URL. Istnieje jednak wiele dostępnych rozszerzeń jQuery, które czynią to łatwym zadaniem. Na przykład

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

z tym rozszerzeniem można wykonać następujące czynności

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

Samo rozszerzenie obsługuje znacznie więcej niż tylko ciąg kwerendy. Możesz użyć attr dla praktycznie każdej części adresu URL.

Answer 3

Tak, można użyć właściwości łącza .search ...

alert(this.search); 

---

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

---

Aby pozbyć się ?, to właśnie .slice() ...

this.search.slice(1) 

---

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

Answer 4

Rozwijanie Sarfraz odpowiedź, biorąc pod kotwicą

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

Można uzyskać kwerendy params

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