Working with jquery .ajax and hrefs

Question

How do you pass values from a link like this to a function <a href="search=sony&offset=20&lang=en" class="more_info">Read More</a> This link isn't static and values change depending on the search term and page number.

When a user clicks this link, it sends those 3 values to demo_search.php. Results are returned as html. Only a div on the page is refreshed.

I cant figure out how to get those values to the data part in the function. Can you please help me with that.

$(function() {

    $(".more_info").click(function() {
            // ajax call
            $.ajax({
                type: "GET",
                url: "demo_search.php",
                data: Need help in getting those values from the href here,
                beforeSend: function(html) {

                    $(".imgProgress").html(imgLoad);

                },
               success: function(page_data){

                    $("#results").empty();
                    $("#results").append(page_data);
                    $(".imgProgress").empty();
              },

            });    
        }
        return false;
    });
});

you should be able to do: `data: this.href` since your href contains data that can be directly placed into the data option. — Kevin B, Jul 23 '12 at 14:56
Possible duplicate to : http://stackoverflow.com/questions/2090551/parse-query-string-in-javascript — DevlshOne, Jul 23 '12 at 15:01

mgraph · Accepted Answer · 2012-07-23T15:11:14.960

3

try:

url: "demo_search.php?"+$(this).attr("href"),

edited Jul 23 '12 at 15:11

answered Jul 23 '12 at 14:57

mgraph

15,238
4
41
75

Personally I'd make the `href` attribute the full URL, rather than just the query string, then do `url: this.href`, but this way works too. – Anthony Grist Jul 23 '12 at 15:04

score 2 · Answer 2 · answered Jul 23 '12 at 15:02

2

When calling $.ajax(), you can actually pass the data as a query string, so

data : this.href

should work.

answered Jul 23 '12 at 15:02

jay c.

1,521
10
9

score 0 · Answer 3 · answered Jul 23 '12 at 14:58

try this

$(function() {

    $(".more_info").click(function() {
            var targetLink = this;
            $.ajax({
                type: "GET",
                url: "demo_search.php?"+$(targetLink).attr("href"),
                beforeSend: function(html) {

                    $(".imgProgress").html(imgLoad);

                },
               success: function(page_data){

                    $("#results").empty();
                    $("#results").append(page_data);
                    $(".imgProgress").empty();
              },

            });    
        }
        return false;
    });
});

Working with jquery .ajax and hrefs

3 Answers3