Django 通过 AJAX 渲染 HTML - 缺少上下文变量数据答案

【问题标题】：Django Render HTML via AJAX - Missing Context Variable DataDjango 通过 AJAX 渲染 HTML - 缺少上下文变量数据
【发布时间】：2023-06-10 05:02:01
【问题描述】：

在我的 Django Web 应用程序中，我试图通过 AJAX 仅动态更新页面的某个部分，但这样做是通过在子模板 ({% include 'keywords.html' %}) 中返回/替换 HTML 来实现的。我知道我可以（也许应该）返回一个 JsonResponse （我已经成功地做到了），但我想尝试让下面的实现工作（就像其他人似乎有的那样）。

视图成功地将 HTML 返回到 AJAX 响应，但缺少 keywords 上下文变量中包含的数据。

templates/index.html

...
<div id="keywords">
    {% include 'keywords.html' %}
</div>
...

模板/keywords.html

<div id="keywords">
{% if keywords %}
  {% for keyword in keywords %}
    <p>{{keyword.word}}</p>
  {% endfor %}
{% endif %}
</div>

views.py

def add_keyword(request):

    if request.method == 'POST':
        form = KeywordForm(request.POST)

        if form.is_valid():

            ...

            keywords = Keywords.objects.values()...

            print(keywords) # this works, contains a queryset with data

            context = {
                keywords: keywords,
            }

            # i've also tried return HttpResponse(render_to_string(...)) 
            # with same result
            return render(request, 'keywords.html', context))

index.js

// i've also tried jquery .load()
$.ajax({
        url: data.url,
        type: "POST",
        data:
        {
          keyword: keyword,
          csrfmiddlewaretoken: data.csrf_token
        },
        success: function(data) {
          $("#keywords").html(data);
        }
      });

AJAX 响应数据：

<div id="keywords">

</div>

我可能遗漏了什么或做错了什么？

【问题讨论】：

在你的上下文中你缺少引号，当返回页面时你有一个额外的括号并放置你的模板，如 templates/app_name/keywords.html 检查这些然后我们会找出我们缺少的地方。它适用于我的系统。
这是缺少的引号 - 呸！谢谢你额外的一双眼睛。额外的括号只是问题中的复制和粘贴错误。如果您将此作为答案提交，那么我会接受。

标签： django ajax django-views django-templates

【解决方案1】：

在您的上下文中，您缺少引号，在返回页面时您有一个额外的括号。它适用于我的系统。

【讨论】：

【解决方案2】：

您可以使用 loade 和 context 使用上下文数据呈现模板它将使用 jinja 上下文执行第一个模板，然后在 html 中呈现，然后返回最终的 html 文本，然后您可以使用 JsonResponse

传递

尝试以下内容，然后告诉我

@view.py

from django.template import context,loader
...

def render_view(request):
    if request.method == 'GET':
        form = KeywordForm(request.POST)
        if form.is_valid():
            keywords = Keywords.objects.values()
            print(keywords) # this works, contains a queryse
            context = {
                keywords: keywords,
            } 
            template = loader.get_template('keywords.html')
            html = template.render(context)
            print(html)
            return JsonResponse({'html':html},status=200,content_type="application/json")

@in ajax 调用成功方法你应该渲染

 success: function(data) {
          $("#keywords").html(data);
          //or
          //ordocument.getElementById('keywords').innerHTML=data;
        }

是否有效？

【讨论】：