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

是的，您可以使用链接的.search属性...

alert( this.search );

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

要摆脱?，只需.slice()它......

this.search.slice(1)

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

Answer 3

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

Answer 4

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用于网址的几乎每个部分。

如何从click事件对象获取链接的href属性的参数

4 个答案: