Come ottenere i parametri di un attributo href di un collegamento dall'oggetto evento click

Question

C'è un modo semplice per ottenere i parametri alla fine di un attributo href di un collegamento cliccato utilizzando l'oggetto evento click?

ho qualche codice jQuery che assomiglia a questo:

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

Ed ecco il relativo codice 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> 

Quello che sto cercando di fare è impaginare i risultati di una ricerca che Ho fatto con ajax. La ricerca funziona bene e ottenere un elenco di utenti che corrispondono alla query. Funziona anche la parte dello script dei risultati che crea i collegamenti di paginazione.

Nell'esempio sopra, ci sono due pagine di risultati. Quello che voglio fare quando un utente fa clic sul collegamento per andare alla pagina 2 dei risultati è di intercettare il clic del collegamento e creare invece una nuova richiesta Ajax utilizzando term=ma&p=2 come i dati passati alla richiesta.

Quindi, per farla breve, c'è un modo semplice per ottenere term=ma&p=2 dall'oggetto evento passato la funzione anonima nel mio jQuery sopra?

Answer 1

È possibile utilizzare il metodo this.href per leggere l'attributo di collegamento:

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

Esempio:

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

Answer 2

jQuery non supporta l'analisi degli URL. Tuttavia ci sono un sacco di estensioni jQuery disponibili che fanno e rendono questo un compito facile. Per esempio

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

Con questa estensione è possibile effettuare le seguenti operazioni

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

L'estensione si sostiene molto di più che la stringa di query. È possibile utilizzare attr praticamente per ogni parte dell'URL.

Answer 3

Sì, è possibile utilizzare la proprietà .search del collegamento ...

alert(this.search); 

---

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

---

per sbarazzarsi del ?, basta .slice() esso ...

this.search.slice(1) 

---

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

Answer 4

Sviluppare risposta Sarfraz, dato un'ancora

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

È possibile ottenere la query 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; 
    } 
}