Broken relative Url in jQuery getJSON Ajax Method

The Url for my development environment is:

http://localhost/mysite/blah...

I am using jQuery & getJSON to perform some ajax actions on my site, which work fine all the time I specify the url as:

/mysite/controller/action

..but this is not ideal as I don't want to hardcode my development url into my seperate jQuery include files.

When the site goes live, it'll be fine to have controller/action or /controller/action as the url as that will resolve ok, but for the development site, it's no go.

I've tried:

controller/action

..but this returns a 404, which suprised me as I thought the lack of / at the front of the url would prevent from looking at the website r开发者_Go百科oot.

There must be a neat solution to this?

I would do this by inserting a global constant in my HTML header:

<script type="text/javascript">
  var BASE_URL = '/mysite/';
</script>

That would be inserted from your server so it can be dynamically changed. Later in your script, you'll be able to make AJAX requests with (jQuery style here):

$.ajax( BASE_URL + '/controller/action', ...);

If you're in

/mysite/controller/action

then the correct relative path to

/mysite/some_other_controller/some_other_action 

is

../../some_other_controller/some_other/action

You can use this code to get the current path of the .js script and use it for calculate your relative path.

var url;
$("script").each(function () {
       if ($(this).attr("src").indexOf("[YOUR_SCRIPT_NAME.JS]") > 0) {
                url = $(this).attr("src");
                url = url.substr(0, url.lastIndexOf("/"));
                return false;
       }
});
var final_url = url + "/your_target_script.js"

Replace YOUR_SCRIPT_NAME with the unique name of your script.