Cómo obtener los parámetros de un atributo href de un enlace desde el objeto de evento click

Question

¿Hay una manera simple de obtener los parámetros al final de un atributo href de un enlace cliqueado utilizando el objeto de evento click?

Tengo algo de código jQuery que tiene este aspecto:

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

Y aquí está el código HTML correspondiente:

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

Lo que estoy tratando de hacer es paginar los resultados de una búsqueda que He terminado con ajax. La búsqueda funciona bien y se obtiene una lista de usuarios que coinciden con la consulta. La parte del guión de resultados que crea los enlaces de paginación también está funcionando.

En el ejemplo anterior, hay dos páginas de resultados. Lo que quiero hacer cuando un usuario hace clic en el enlace para ir a la página 2 de los resultados es interceptar el enlace clic y en su lugar crear una nueva solicitud ajax usando term=ma&p=2 a medida que los datos pasan a la solicitud.

Por lo tanto, para abreviar, ¿hay alguna manera fácil de obtener term=ma&p=2 del objeto de evento pasado la función anónima en mi jQuery anterior?

Answer 1

Usted puede utilizar el método this.href para leer el atributo de enlace:

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

Ejemplo:

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

Answer 2

jQuery en sí mismo no es compatible con el análisis de URL. Sin embargo, hay muchas extensiones jQuery disponibles que hacen y hacen de esto una tarea fácil. Por ejemplo

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

Con esta extensión se puede hacer lo siguiente

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

La extensión misma soporta mucho más que la cadena de consulta. Puede usar attr para prácticamente cada parte de la url.

Answer 3

sí, se puede utilizar la propiedad .search del enlace ...

alert(this.search); 

---

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

---

para deshacerse de la ?, simplemente se .slice() ...

this.search.slice(1) 

---

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

Answer 4

El desarrollo de respuesta Sarfraz, dado un ancla

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

Usted puede obtener la consulta 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; 
    } 
}