Django结合jQuery Autocomplete Ajax的URL跳转问题求助

我太懂你踩的这两个坑了！咱们一步步拆解解决：

问题1：Django URL模板标签在JS里直接用不生效 #

你在main.js里写{% url 'show_person' %}肯定行不通——因为main.js是静态文件，Django的模板引擎只会渲染.html这类模板文件里的标签，静态JS里的模板标签会被当成纯字符串输出，所以跳转后才会出现{% show_person %}这种奇怪的内容。

给你两种靠谱的解决思路：

思路1：在基础模板里定义全局变量 #

在你加载main.js的基础模板（比如base.html）中，先通过<script>把后端生成的URL前缀传给前端：

<script>
// 用0做占位符，因为show_person是带参数的URL，最后替换掉占位符
const personDetailBaseUrl = "{% url 'show_person' 0 %}".replace('0', '');
</script>
<script src="{% static 'js/main.js' %}"></script>

然后在main.js的Autocomplete回调里这么写：

window.location.href = personDetailBaseUrl + ui.item.value;

思路2：用HTML元素的data属性传递 #

如果你的搜索框在导航栏里，可以给它加个自定义data属性：

<input type="text" id="nav-search" data-person-url="{% url 'show_person' 0 %}">

接着在JS里读取这个属性并处理：

const searchInput = $('#nav-search');
const personDetailBaseUrl = searchInput.data('person-url').replace('0', '');

// 选择下拉项时跳转
window.location.href = personDetailBaseUrl + ui.item.value;

问题2：相对路径导致非首页跳转错误 #

你之前用"person/"+ui.item.value是相对路径，浏览器会自动把它追加到当前页面的URL后面——比如在/about/页面就会变成/about/person/123，完全偏离了目标页面。

上面两种思路已经解决了这个问题，因为我们生成的是绝对路径（从站点根目录开始的路径，比如/person/123），不管当前在哪个页面，都会直接跳转到正确的URL。

如果你的URL结构比较简单，也可以直接用站点根URL拼接：

<script>
// 从Django请求对象里获取站点根地址
const siteRoot = "{{ request.scheme }}://{{ request.get_host }}/";
</script>

然后在JS里这么写：

window.location.href = siteRoot + 'person/' + ui.item.value;

额外小技巧（Django 3.1+适用） #

可以先把URL存成模板变量再处理，可读性更强：

{% url 'show_person' 0 as show_person_temp_url %}
<script>
// 切掉末尾的占位符0
const personDetailBaseUrl = "{{ show_person_temp_url|slice:":-1" }}";
</script>

内容的提问来源于stack exchange，提问作者a.powell