JSPX页面动态生成a标签时href未正确获取变量值问题求助

看起来你遇到的问题是动态生成<a>标签时，href没有正确获取到url变量的实际值，而是出现了异常解析。这大概率是因为HTML属性值未加引号导致的浏览器解析错误，另外传统字符串拼接的写法也容易引发这类问题。

具体问题点 #

你当前拼接<a>标签的代码是：

html = html+'<td>'+data[index].fileName+'</td><td><a href='+url+' ><span class="fa fa-download"> Download</span></a></td>';

这里的href='+url+'没有给属性值添加引号，当url中包含特殊字符（比如斜杠、参数符号&等）时，浏览器会错误解析href的取值范围，甚至可能把后续内容当成标签的其他属性，最终导致href无法正确读取变量值。

修复方案 #

方案1：给href属性值添加引号 #

修改拼接代码，给href的值加上双引号（注意和外层字符串的引号配对），确保浏览器能完整解析整个URL：

html = html+'<td>'+data[index].fileName+'</td><td><a href="'+url+'" ><span class="fa fa-download"> Download</span></a></td>';

方案2：使用ES6模板字符串（更推荐） #

模板字符串用反引号`包裹，支持直接嵌入变量，写法简洁直观，完全避免引号配对的麻烦：

// 替换原有的$.each循环内的拼接逻辑
$.each(data, function(index, item) { // 用item代替data[index]，代码更简洁
  var url = "${downloaHistodyUrl}" + item.id;
  alert(url);
  
  // 用模板字符串拼接HTML片段
  html += `
    <tr>
      <td>${item.versione}</td>
      ${item.fileName != null ? `
        <td>${item.fileName}</td>
        <td><a href="${url}"><span class="fa fa-download"> Download</span></a></td>
      ` : '<td></td>'}
      ${(item.motivazione == "" || item.motivazione == null) ? '<td></td>' : `<td>${item.motivazione}</td>`}
    </tr>
  `;
});

额外优化建议 #

• 在拼接HTML前，可以先清空目标容器的内容（比如$('#content_modal_history_${doc.id}').empty()），避免多次打开模态框时重复添加内容。
• 尽量避免重复访问data[index]，通过$.each的item参数直接获取当前项，既能提升代码可读性，也能减少不必要的数组访问开销。

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