带有 jQuery 的 Django 模板“包含”标签答案

【问题标题】：Django templates "include" tag with jQuery带有 jQuery 的 Django 模板“包含”标签
【发布时间】：2021-05-24 17:17:56
【问题描述】：

我正在尝试减少附加相同 div 的重复。我正在使用 ajax，我想在每次成功发布后将上下文传递给另一个文件，但它总是导致 TemplateSyntaxError。

TemplateSyntaxError at /items/order/2546
Could not parse the remainder: '${data}' from '${data}'

是否有可能在 jQuery 中做这样的事情，还是我做错了？

$.ajax({
    url: "{% url 'namespace:name' %}",
    headers: {
       'X-CSRFToken': csrftoken,
    },
    data: {
       item: "123"
    },
    method: "POST",
    success: (response) => {
        let data = JSON.parse(response);
        $('#container').append(`{% include "partials/repeating_item.html" with response=${data} %}`);
    }
});

partials/repeating_item.html 显示类似这样的内容

<div class="list-item item-{{ response.order_id }}">
    <a href="#" class="item-name" data-item='{{ response.item_id }}'>
        <div class="svg-div">
            <!-- some svg -->
            <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
        </div>
    </a>
    <div class="item-summary-title">
        {{ response.item_name }}
    </div>
    <div>
        <div class="item-price-div">
        <div><span>${{ response.item_price }}</span></div>
        </div>
    </div>
</div>

ajax 响应返回一个对象

{
    item_id: 69,
    order_id: 2546,
    item_name: "X Gaming Chair",
    item_price: "399.00"
}

提前致谢！

【问题讨论】：

你能分享完整的错误吗
是的，你可以在 jquery 中做到这一点。显示您在 response 和 partials/repeating_item.html htmls 中的内容。
感谢您抽出宝贵时间回复。我编辑了我的问题并添加了错误、响应和 html 内容。
是json数组还是只返回一个对象？
只有一个。我正在从后端视图返回字典

标签： javascript jquery django django-templates

【解决方案1】：

您可以在 ajax 的成功函数中创建 html 可以将其附加到您的 container div 中

演示代码：

let data = {
  item_id: 69,
  order_id: 2546,
  item_name: "X Gaming Chair",
  item_price: "399.00"
}
//ajax codes here ..
/*$.ajax({
    url: "{% url 'namespace:name' %}",
    headers: {
       'X-CSRFToken': csrftoken,
    },
    data: {
       item: "123"
    },
    method: "POST",
    success: (response) => {*/
    //create that html here ..and add json datas 
// let data = JSON.parse(response);
$('#container').append(`<div class="list-item item-${data.order_id }">
    <a href="#" class="item-name" data-item='${data.item_id}'>
      <div class="svg-div">
        <!-- some svg -->
        <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
      </div>
    </a>
    <div class="item-summary-title">
      ${data.item_name}
    </div>
    <div>
      <div class="item-price-div">
        <div><span>${data.item_price}</span></div>
      </div>
    </div>
  </div>`);

/*}
})*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
</div>

【讨论】：