使用Django REST Framework开发博客时JS DOM设置URL ID报错及解决

报错原因 #

你遇到的错误核心是Django模板引擎与客户端JavaScript的执行逻辑冲突：

• Django的{% url %}标签是在服务器端渲染阶段解析的，它会将标签内的内容当作Django模板语法处理，但你写入的${id}是JavaScript的模板字符串变量，对Django来说属于无效语法，因此抛出解析错误。
• 你尝试的{{}}、{}都是Django模板语法，同样无法在客户端JS中动态替换ID值。

可行解决方案 #

方案1：直接拼接客户端URL（你已采用的有效方法） #

绕过Django的模板URL解析，直接在JS中拼接完整路径，让JavaScript生成符合要求的链接：

fetch('http://127.0.0.1:8000/getdata')
    .then(response => response.json())
    .then(data => {
        const ul = document.getElementById('my-list');
        ul.innerHTML = '';
        data.forEach(element => {
            const list = document.createElement('div')
            const id = element.id
            list.innerHTML = `
            <h1 class='text-uppercase'>${element.title}</h1>
            <hr>
            <h5>@${element.author}</h5>
            <div>${element.content}</div>
            <button class="btn btn-danger" onclick="deleteitem(${element.id})">delete</button>
            <a href="/editpost/${id}" class="btn btn-info">编辑</a>
            `;
            list.classList.add('card', 'card-body', 'mb-2');
            ul.appendChild(list);
            console.log(element.title)
        });
    })

方案2：结合Django URL反向解析（更优雅的实践） #

如果想保留Django URL命名的灵活性，避免硬编码路径，可以先在页面模板中渲染出编辑页面的基础URL，再用JS替换ID：

1. 在HTML模板的<script>标签中提前渲染基础URL：

<script>
// 用0占位，后续替换为实际ID
const editPostBaseUrl = "{% url 'editpost' 0 %}".replace('0', '');
</script>

2. 在JavaScript中拼接完整URL：

fetch('http://127.0.0.1:8000/getdata')
    .then(response => response.json())
    .then(data => {
        const ul = document.getElementById('my-list');
        ul.innerHTML = '';
        data.forEach(element => {
            const list = document.createElement('div')
            const id = element.id
            list.innerHTML = `
            <h1 class='text-uppercase'>${element.title}</h1>
            <hr>
            <h5>@${element.author}</h5>
            <div>${element.content}</div>
            <button class="btn btn-danger" onclick="deleteitem(${element.id})">delete</button>
            <a href="${editPostBaseUrl}${id}" class="btn btn-info">编辑</a>
            `;
            list.classList.add('card', 'card-body', 'mb-2');
            ul.appendChild(list);
            console.log(element.title)
        });
    })

这种方式既利用了Django URL反向解析的优势，又能在客户端动态生成正确链接。

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