XAMP环境下子目录中JS发起AJAX请求PHP返回404路径问题

问题根因 #

AJAX请求的相对路径是相对于浏览器当前打开的HTML/PHP页面的地址，而非相对于JS文件本身的存放路径。
你当前打开的页面存放在Website根目录下，地址类似http://localhost/Website/index.php，代码里直接写"update.php"时，浏览器会默认请求http://localhost/Website/update.php，而非functions子目录下的文件，所以触发404错误。

解决方案 #

可任选以下任意一种方式修复：

方案1：使用相对于页面的路径 #

直接把AJAX请求地址改为./functions/update.php，表示从当前打开的页面所在目录，进入functions子目录找对应文件，修改后的代码如下：

function navUpdate(){    
    alert('Hello from functions');    
    var navItemOne = document.getElementById('menu-item-one').innerHTML;    
    var navItemTwo = document.getElementById('menu-item-two').innerHTML;    
    var navItemThree = document.getElementById('menu-item-three').innerHTML;    
    var navItemFour = document.getElementById('menu-item-four').innerHTML;        
    
    var xhttp = new XMLHttpRequest();    
    xhttp.onreadystatechange = function(){        
        if(this.readyState == 4 && this.status == 200){            
            alert(this.responseText);        
        }    
    }
    // 仅修改这一行的请求路径即可
    xhttp.open("POST", "./functions/update.php", true);    
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");    
    xhttp.send(`nav-item-one=${navItemOne}&nav-item-two=${navItemTwo}&nav-item-three=${navItemThree}&nav-item-four=${navItemFour}`);
}

方案2：使用站点绝对路径（适配多层级页面场景） #

如果你的站点存在多层子目录下的页面都要调用这个JS，直接写站点根路径的绝对地址更稳定：
如果你的Website是站点根目录，请求地址写/functions/update.php；如果Website是XAMPP htdocs下的子站点，请求地址写/Website/functions/update.php。

方案3：动态配置根路径（适配多环境部署） #

可以在站点公共头部预先定义全局的接口根路径变量，后续换部署环境不需要逐个修改JS里的路径：

1. 在页面的<head>标签中添加如下代码：

<script>
// 自动获取当前站点的functions目录路径
const API_BASE = '<?= "http://" . $_SERVER["HTTP_HOST"] . rtrim(dirname($_SERVER["SCRIPT_NAME"]), "/") ?>/functions/';
</script>

2. JS中AJAX请求地址改为API_BASE + "update.php"即可。

内容的提问来源于stack exchange，提问作者falcon