带有 jQ​​uery 的 Django 模板“包含”标签

Posted 2023-02-24

【中文标题】带有 jQ​​uery 的 Django 模板“包含”标签

【英文标题】：Django templates "include" tag with jQuery

【发布时间】：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   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数组还是只返回一个对象？

只有一个。我正在从后端视图返回字典

【参考方案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   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>