在Django 1.8中用jQuery生成带URL名称的链接问题求助

这个问题我之前也碰到过，核心原因就是前端JS没法直接解析Django的模板标签——毕竟模板标签是后端渲染阶段处理的，到了浏览器这里，它就是个普通字符串，自然会被当成URL的一部分拼进去！给你几个靠谱的解决办法：

方法1：提前在模板中渲染好URL映射 #

在HTML模板里，先把需要用到的URL提前渲染成JS变量，这样jQuery就能直接调用了：

<!-- 在你的模板文件（比如base.html或者当前页面模板）里添加这段script -->
<script>
var djangoUrls = {
    'curr1': '{% url "curr1" %}',
    'home2': '{% url "home2" %}'
    // 把你需要用到的URL名称和对应模板标签都加在这里
};
</script>

然后在你的jQuery代码里，直接用这个对象来生成链接：

// 比如生成表格行里的链接
var linkHtml = '<a href="' + djangoUrls['curr1'] + '">test</a>';
// 把这个linkHtml插入到表格的对应单元格里
$('table tr td').append(linkHtml);

这样生成的链接就是后端渲染好的正确URL，不会再出现模板标签的字符串了。

方法2：给DOM元素绑定动态URL（适合带参数的场景） #

如果你的URL需要动态参数（比如根据表格行的id生成不同的URL），可以在渲染表格的时候，把对应URL存在DOM元素的自定义属性里：

<!-- 模板里渲染表格行时，添加data-url属性 -->
{% for item in items %}
<tr data-url="{% url 'curr1' item.id %}">
    <td>{{ item.name }}</td>
    <!-- 其他单元格 -->
</tr>
{% endfor %}

然后用jQuery获取这个属性值来生成链接：

// 遍历表格行，给每行添加链接
$('table tr').each(function() {
    var url = $(this).data('url');
    var linkHtml = '<a href="' + url + '">test</a>';
    $(this).find('td:last').append(linkHtml);
});

这个方法能完美处理带动态参数的URL场景，非常灵活。

为什么原来的方法不行？ #

再啰嗦两句：Django的{% url %}模板标签是服务器端渲染的，只有在Django处理模板的时候才会被替换成实际的URL。如果直接在jQuery的字符串里写{% url 'curr1' %}，这段代码是在浏览器里执行的，服务器根本没机会解析它，所以浏览器会把它当成普通文本拼到URL里，就出现了你看到的http://localhost:8000/{% url 'curr1'%}这种错误。

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