How to pass a URL parameter in an ajax() call

Question

I have a single page (products) which responds to URL parameters and displays the information accordingly.

Here are some examples:

http://www.mysupersite.com/products
http://www.mysupersite.com/products/buy
http://www.mysupersite.com/products/buy/computers

These are user-friendly URLs. The URL parameters are "buy" and "computers".

I need to pass the parameters from the current page in an ajax() to my server so that it knows what types of information to send back e.g.

$.ajax({
    type: "POST",
    url: "/cfc/getsomeproducts",
    dataType: "html",
    data: {
        //psuedo code below...
        ProductCategory: "buy",
        ProductType: "computers"
    }
})

To clarify, if I were on /products/buy, I would need to send ProductCategory: 'buy'. If on /products/buy/computers, ProductCategory: 'buy', ProductType: 'computers'.

How could I achieve something like this?

I don't understand the question. The code you show will work just fine. Do you just want to send the AJAX call to http://www.mysupersite.com/products/buy/computers? Can you explain what doesn't work with what you have? — gen_Eric
– gen_Eric, Commented Dec 1, 2014 at 22:19
Those aren't "URL parameters". URL (or query) parameters come after a ? and are separated by &, eg /some/uri?category=buy&type=computers — Phil
– Phil, Commented Dec 1, 2014 at 22:19
Maybe if you showed how they were rewritten, you might get better suggestions. Anyway, the client-side doesn't know how your server treats requests. All it sees is a URI with no query parameters — Phil
– Phil, Commented Dec 1, 2014 at 22:22
Then simply change the url parameter in your code above to /products.cfm and use GET instead of POST and it should work as required — Phil
– Phil, Commented Dec 1, 2014 at 22:24

score 2 · Accepted Answer · 2014-12-01 22:34:55Z

2

var url = document.location.pathname;
var values = url.split("/");

$.ajax({
    type: "POST",
    url: "/cfc/getsomeproducts",
    dataType: "html",
    data: {
        ProductCategory: values[2],
        ProductType: values[3]
    }
})

edited Dec 1, 2014 at 22:34

answered Dec 1, 2014 at 22:28

user2045806

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

9 Comments

volume one Over a year ago

You have put the URL in the variable url. But how do you get in there in the first place without manually typing it in? I need to get it from the address bar

Phil Over a year ago

@volumeone document.location.pathname

Phil Over a year ago

Why split more than once? Just use values[4], etc

volume one Over a year ago

So how does it split after the first / and then the second / and so on? A URL could be like mysupersite.com/products/sell/accessories

user2045806 Over a year ago

@Phil My mistake, fixed.

|

MiiinimalLogic · Accepted Answer · 2014-12-01 22:27:07Z

1

If you have a solid convention for URL params you can just parse the URL before your ajax call then send an array as data. On the backend, just parse the array in the order your convention defines. Something like:

var myUrl = 'http://my.url/param1/param2',
delimiter = '/',
start = 3,
params = str.split(delimiter).slice(start),


$.ajax({
type: "POST",
url: "/cfc/getsomeproducts",
dataType: "html",
data: {
    params[]: params
}
})

answered Dec 1, 2014 at 22:27

MiiinimalLogic

8186 silver badges11 bronze badges

1 Comment

volume one Over a year ago

You've put the URL into the myURL variable. How do you get the URL from the address bar into there without manually typing it in?

Collectives™ on Stack Overflow

How to pass a URL parameter in an ajax() call

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related