如何在HTML/JSP锚点标签中正确拼接base URL变量与字符串？

嘿，我来帮你搞定这个URL拼接的问题～

首先得说清楚你遇到的问题根源：你直接在HTML锚点的href属性里写path.projectName+"/cluster"，浏览器会把这段内容完全当成普通字符串，不会去解析JavaScript变量path.projectName，所以才会出现那种带着变量名字面量的奇怪URL。

下面分两种常见场景给你解决方案：

1. 纯HTML环境（用JavaScript动态设置） #

如果是纯HTML页面，你需要通过JavaScript来动态修改锚点的href属性，步骤如下：

首先给你的锚点加一个唯一ID，方便JS获取：

<a id="clusterLink" href="#">跳转到Cluster页面</a>

然后在你的cluster.js里添加这段代码（确保DOM加载完成后执行，避免找不到元素）：

// 等待页面DOM加载完毕
document.addEventListener('DOMContentLoaded', function() {
  var path = { projectName:"http://localhost:8080/UniconnectConfigurationWeb" };
  // 获取锚点元素
  const clusterLink = document.getElementById('clusterLink');
  // 拼接URL并赋值给href
  clusterLink.href = `${path.projectName}/cluster`;
});

这样页面加载后，锚点的href就会被设置成正确的http://localhost:8080/UniconnectConfigurationWeb/cluster啦。

2. JSP环境（推荐用EL表达式或脚本片段） #

如果是在JSP页面中，有更简洁的处理方式：

方式一：JSP脚本片段（Scriptlet） #

直接在JSP里定义变量，然后在href中拼接：

<%
  // 定义基础URL变量
  String projectBaseUrl = "http://localhost:8080/UniconnectConfigurationWeb";
%>
<a href="<%= projectBaseUrl %>/cluster">跳转到Cluster页面</a>

方式二：EL表达式（更规范，推荐） #

如果你的基础URL是后端传递到页面的（比如存在request作用域），直接用EL表达式拼接：

// 假设后端已经把基础URL放到request中：request.setAttribute("projectBaseUrl", "xxx");
<a href="${projectBaseUrl}/cluster">跳转到Cluster页面</a>

小提示 #

拼接URL的时候注意检查斜杠：如果你的基础URL末尾已经带有/，那后面的路径就写成cluster而不是/cluster，避免出现//cluster这种不规范的路径哦～

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