HTML转JavaScript字符串时Django url传动态参数item1.id报错如何解决

问题根因 #

Django 的 {% url %} 模板标签是服务端渲染阶段执行的，只有服务端能识别并解析为实际的URL路径；而你JS中的item1.id是客户端接口返回后才生成的动态变量，服务端渲染时根本获取不到这个值，所以直接把item1.id写在模板标签里会触发服务端语法报错。

你之前写死参数1能正常运行，是因为1是固定数值，服务端渲染时可以正常解析出对应的URL路径。

正确实现方式 #

先在Django模板的脚本部分预定义一个带占位符的路由模板，再在JS动态拼接HTML时替换占位符为实际的item1.id即可：

1. 先在页面的<script>标签开头预定义路由模板（占位符可以随便选一个不会出现在正常URL里的值，比如这里用0）：

// 该代码要写在Django模板的<script>标签内，服务端会把模板标签解析为带占位符的实际路径，比如 /stock/report/0/
const stockReportBaseUrl = "{% url 'select_stock_report' 0 %}";

2. 动态拼接HTML时替换占位符，推荐用ES6模板字符串避免引号嵌套混乱：

html += `<tr>
  <td><a href="${stockReportBaseUrl.replace('0', item1.id)}">${item1.code}</a></td>
  <td>${item1.name}</td>
  <td>${item1.open_qty} </td>
</tr>`;

如果要沿用你原来的字符串拼接写法也可以，代码如下：

html += "<tr><td><a href='" + stockReportBaseUrl.replace('0', item1.id) + "'>" + item1.code + "</a></td>" + 
  "<td>" + item1.name + "</td>" + 
  "<td>" + item1.open_qty + " </td></tr>";

内容的提问来源于stack exchange，提问作者Madukkur-com Madukkur