Cách lấy tham số của thuộc tính href của liên kết từ đối tượng sự kiện nhấp chuột

Question

Có cách nào đơn giản để lấy tham số ở cuối thuộc tính href của liên kết được nhấp bằng đối tượng sự kiện nhấp chuột không?

Tôi có một số mã jQuery trông như thế này:

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

Và đây là HTML liên quan:

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

Những gì tôi đang cố gắng làm là đánh số trang kết quả tìm kiếm mà Tôi đã làm với ajax. Tìm kiếm chạy tốt và có danh sách người dùng phù hợp với truy vấn. Phần kịch bản kết quả tạo ra các liên kết pagination cũng đang hoạt động.

Trong ví dụ trên, có hai trang kết quả. Những gì tôi muốn làm khi người dùng nhấp vào liên kết để đi đến trang 2 của kết quả là để chặn nhấp vào liên kết và thay vào đó tạo yêu cầu ajax mới bằng cách sử dụng term=ma&p=2 làm dữ liệu được chuyển đến yêu cầu.

Vì vậy, câu chuyện dài ngắn, có cách nào dễ dàng để lấy term=ma&p=2 từ đối tượng sự kiện đã vượt qua hàm ẩn danh trong jQuery của tôi ở trên không?

Answer 1

Bạn có thể sử dụng phương pháp this.href để đọc các thuộc tính liên kết:

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

Ví dụ:

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

Answer 2

Bản thân jQuery không hỗ trợ phân tích cú pháp URL. Tuy nhiên có rất nhiều phần mở rộng jQuery có sẵn mà làm và làm cho một nhiệm vụ dễ dàng. Ví dụ

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

Với phần mở rộng này, bạn có thể làm như sau

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

Phần mở rộng chính nó hỗ trợ nhiều hơn chỉ là chuỗi truy vấn. Bạn có thể sử dụng attr cho hầu hết mọi phần của url.

Answer 3

Có, bạn có thể sử dụng .search tài sản của liên kết ...

alert(this.search); 

---

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

---

Để thoát khỏi ?, chỉ .slice() nó ...

this.search.slice(1) 

---

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

Answer 4

Phát triển Sarfraz câu trả lời, đưa ra một neo

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

Bạn có thể nhận các truy vấn 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; 
    } 
}