自定义JS路由访问带参数URL触发无限循环问题排查

问题原因分析 #

1. 相对路径请求错误：访问/search/xxx这类多级路径时，页面的基础URL变为/search/，此时Ajax请求filecheck.php会被解析为/search/filecheck.php，该文件不存在触发服务器Rewrite规则跳转至入口文件，重新执行路由逻辑，形成无限循环。
2. Rewrite规则目标错误：当前规则跳转至index.html，但项目实际入口是index.php，导致后续路由逻辑执行混乱。
3. 路径解析函数逻辑冗余：w()函数中两次执行path.shift()，可能导致路径段丢失，虽不是本次循环直接原因，但会影响路径解析准确性。

解决方案 #

1. 修正Ajax请求的路径为绝对路径 #

将所有资源请求改为绝对路径，确保无论当前URL层级如何，都能正确定位到服务器上的文件：

// 修改filecheck.php请求路径
$.ajax({
    url: '/filecheck.php',
    data: { file: filePath },
    dataType: 'html',
    // 其他配置不变
});

// 修改footer加载路径
.find(".footer-content")
.load("/elements/footer.html");

2. 更新服务器Rewrite规则 #

将Rewrite目标改为实际入口文件index.php：

<Directory "/projects/pok/">
    AllowOverride All
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.+)$ index.php?/$1 [L]
</Directory>

3. 优化路径解析函数w() #

简化路径解析逻辑，确保正确提取有效路径段：

function w() {
    var path = window.location.pathname.split('/');
    // 过滤所有空字符串，得到有效路径数组
    return path.filter(item => item !== "");
}

该函数处理后，/search返回["search"]，/search/xxx返回["search","xxx"]，符合路由解析需求。

4. 移除同步Ajax请求（可选优化） #

原代码中async: false会阻塞浏览器主线程，建议改为异步请求（默认即为异步，可直接删除该配置）：

$.ajax({
    url: '/filecheck.php',
    data: { file: filePath },
    dataType: 'html',
    // 移除async: false
    success: function(data) {
        // 原有处理逻辑不变
    }
});

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