Jquery link with query parameter to ajax request

Question

I have links like http://example.com?query1=query1&query2=query2 as href of anchor tag. I want to do post ajax on href click using data from the query parameter from the link. I have written code

$("a").bind('click',function(){
    $.ajax({type:'post',url:$(this).attr('href'), success: function(data){
    alert(data);
  }})
        return false;
});

but it does not send query parameter inside ajax post request. Request query data length is 0.

how can I change this code to manipulate data from query parameter of link ?

Edit

Sorry my bad but it is not working these are the request

Accept:application/json, text/javascript, */*; q=0.01
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:0


Query String parameter 
action:delete
id:12

So these fields are not going inside request content.

Jamie Dixon · Accepted Answer · 2011-09-15 08:52:47Z

3

~~You need to use the value of the href attribute, not just the jQuery object itself.~~

~~url:$(this).attr('href').val()~~

Update

Although you said this answer worked for you, I made a mistake. val is not a valid function of attr however doing it the original way you had it works for me.

See this demo: http://jsfiddle.net/PuyzU/

Update 2

Ok, I see your problem now. It wasn't atall clear from the question what you meant.

Let me rewrite your question here to make sure I'm on the right track.

I want to take the querstring parameters of a URL and use them in my ajax POST action. How do I do that with jQuery?

In your ajax post method there is a property data where you'll store the data you want to post to the server.

$.ajax({
    type: 'post',
    url: "http://[...],
    data: DataToPostToServerHere
    [...]

In this case we can obtain the querysting parameter values as a single string by splitting our URL on the ? and use the first portion of the array as the URL and the second portion as the data we're sending:

var urlFull = $('#myLink').attr('href').split('?');
urlFull[0] // Our URL
urlFull[1] // The data to put into the data property for posting.

Working Example

edited Sep 15, 2011 at 8:52

answered Sep 14, 2011 at 17:04

Jamie Dixon

54.1k21 gold badges131 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jamie Dixon Over a year ago

Really? I just checked my code sample and I think it's wrong. Using .val() throws an error, infact doing it your original way works for me.

Vivek Goel Over a year ago

oh sorry not :P I was trying here jsfiddle.net/Sta7D/8 and on click it was javascript error and page was loading it self with those value. I network panel I thought it is ajax request :P

Jamie Dixon Over a year ago

Here's an updated and working version of your code: jsfiddle.net/Sta7D/10

Jamie Dixon Over a year ago

Notice also that I replaced your return false; with event.preventDefault(). This is a more desirable way (more jQuery way) to do what u want.

Vivek Goel Over a year ago

sorry it don't works :( these are going as query string action:delete id:12

|

Collectives™ on Stack Overflow

Jquery link with query parameter to ajax request

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related