Relative reference in Javascript files

Question

Hello, Community!

My question is about how the reference to external files works in a Javascript file also external. I explain!

Suppose I have three files: index.php, json.php and javascript.js with the following structure

/
    index.php
    js/
        javascript.js
    data/
        json.php

The Javascript file has the following code, referencing the file json.php:

$.getJSON( "../data/json.php", function( data ) {
    //faz alguma coisa aqui
});

Now, if I include the Javascript file in the file index.php the reference to the archive json.php is lost, although it is technically correct to use the relative reference in the file .JS.

How does that explain?

Answer 1

I go through the same problem, created a function and put in my overall script file in the project.

function getHostSite() {
  //identificar inicio do path
  //usada nas chamadas Ajax / jSON
  var Path = location.host;
  var VirtualDirectory;
  if (Path.indexOf("localhost") >= 0 && Path.indexOf(":") >= 0) {
    VirtualDirectory = "";
  }
  else {
    var pathname = window.location.pathname;
    var VirtualDir = pathname.split('/');
    VirtualDirectory = VirtualDir[1];
    VirtualDirectory = '/' + VirtualDirectory;
  }
  return location.protocol + "//" + location.host + VirtualDirectory + "/"
}

I use it for ajax calls, regardless of the level the URL is.

url: getHostSite() + "Views/TelaCompras",