AJAX请求后更新div并向Jinja模板传数据的Django技术疑问

首先明确：Jinja模板是服务器端渲染的，页面加载完成后，Jinja的模板语法已经被解析成静态HTML，客户端的JavaScript无法再触发Jinja的渲染逻辑。所以你没法直接把AJAX返回的数据"传入"已加载页面的Jinja模板里，得用以下两种方案实现需求：

方案一：服务器端渲染模板片段，AJAX返回渲染好的HTML #

这种方式能复用你原有的Jinja模板代码，步骤如下：

1. 新建模板片段
   创建一个单独的模板文件（比如data_fragment.html），把你原来的Jinja代码放进去：

{% if data %}
  <p>{{data.title}}</p>
  <p>{{data.price}}</p>
{% endif %}

2. 修改Django视图
   在视图中判断AJAX请求，渲染模板片段并返回HTML内容：

from django.shortcuts import render
from django.http import HttpResponse

def index_view(request):
    if request.method == 'POST' and request.headers.get('X-Requested-With') == 'XMLHttpRequest':
        # 这里替换成你实际获取数据的逻辑，比如从数据库查询
        data = {"title": "t1", "price": 20}
        # 渲染模板片段，得到HTML字符串
        rendered_html = render(request, 'data_fragment.html', {'data': data}).content
        return HttpResponse(rendered_html, content_type='text/html')
    # 非AJAX请求返回原页面
    return render(request, 'index.html')

3. 修改AJAX回调与页面结构
   在index.html中添加一个容器用来接收渲染后的HTML，同时修改AJAX的success回调：

<!-- index.html 中添加容器 -->
<div id="data-container">
    {% if data %}
      <p>{{data.title}}</p>
      <p>{{data.price}}</p>
    {% endif %}
</div>

<script>
 $.ajax({
        type: "POST",
        url: "/",
        data: {
            input_value: "test",
            csrfmiddlewaretoken: "{{ csrf_token }}"
        },
        success: function(response) {
            // 把返回的HTML插入到容器中
            document.getElementById('data-container').innerHTML = response;
        },
        error: function() {
            console.log("Error")
        }
    });
</script>

方案二：客户端用JavaScript构建DOM元素 #

如果不想额外创建模板片段，也可以直接在AJAX回调里用返回的数据手动构建页面元素：

<script>
 $.ajax({
        type: "POST",
        url: "/",
        data: {
            input_value: "test",
            csrfmiddlewaretoken: "{{ csrf_token }}"
        },
        success: function(response) {
            const data = response.data;
            const container = document.getElementById('data-container');
            // 清空容器原有内容
            container.innerHTML = '';
            
            if (data) {
                // 创建标题元素
                const titlePara = document.createElement('p');
                titlePara.textContent = data.title;
                // 创建价格元素
                const pricePara = document.createElement('p');
                pricePara.textContent = data.price;
                // 添加到容器
                container.appendChild(titlePara);
                container.appendChild(pricePara);
            }
        },
        error: function() {
            console.log("Error")
        }
    });
</script>

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