时间戳

首页 > 解决方案 > 更新模板数据后是否必须重新渲染我的页面

django - 更新模板数据后是否必须重新渲染我的页面

问题描述

首先，我搜索并看到了另一个答案，但它不能满足我的需要。

我正在尝试使用我的 HTML 中的 jQuery/AJAX 发布数据以更新我的 HTML 上的列表。

当我第一次渲染我的模板时，它有两个列表组容器，其中左侧容器已预先填充。

两个容器

用户对左侧容器所做的选择决定了右侧容器的列表组数据。

我想将用户从左侧容器中所做的选择发送回后端 Python（服务器），以便我可以为第二个（右侧）容器填充适当的列表。这就是为什么我使用使用 jQuery/AJAX 的 POST 方法来发送用户选择。

HTML

这是HTML的Plnkr

下面是WORKS的 jQuery/AJAX 实现。它将数据发送回 Python （到我的 views.py）：

JS/jQuery/AJAX：

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
    $("#leftContainer > a").click(function(event){
        event.preventDefault();
        $("#leftContainer > a").removeClass("active");
        $(this).addClass("active");

        var leftDataSet = parseInt($(this).attr("data-set"));        
        var item_selected = $(this).text();
        var item_index = $(this).attr("id")   //Users selection to send

        $.ajax({
            type:'POST',
            url:"home/view_results/onclick/",
            data:{
                selected_item:item_index,
                csrfmiddlewaretoken:"{{ csrf_token }}"
            },
            dataType:"text",
            success: function(){$('#message').html("<h3>Data Submitted!</h3>") }
        })        
    });

    $("#rightContainer > a").click(function(event){
        event.preventDefault();
        $(this).toggleClass("active");
    });
</script>

视图.py

#app/views.py
from django.shortcuts import render
class View_Items():

   def render_view_items(self, request, shopid):
      item_history = self.get_item_list(shopid)     #Fetches a list
      return render(request, 'view_results/View_items.html',{
           'item_list':item_history,
        })

网址.py

#app/urls.py
from django.urls import path, re_path
from . import views
results = views.View_Items()
urlpatterns=[
        ...
        re_path(r'view_results/(?P<shopid>\w+)$', results.render_view_items, name = 'view_items'),
        re_path(r'view_results/onclick/$', results.render_view_items_again, name = 'view_results_new'),  # NEW
]

我的问题是：，

现在我已将 AJAX 数据返回到位于 views.py 的 Python 后端，我是否必须重新渲染我的页面才能在我的 HTML 中填充 Right 容器的列表组项？或者是否可以更新列表而无需重新渲染。如果是这样，为什么我在下面提出的重新渲染功能没有更新我的 HTML的RIGHT 容器？更新右容器是需要选择左容器的目标。

我对views.py的补充

#app/views.py
def render_view_items_again(self, request):
    selected_item_by_user = request.POST.get('selected_item')
    # print(selected_item_by_user)
    models = self.get_all_models(selected_item_by_user)  #Fetches a list.
    # print(models)                     #Tested if my list is populated.
    return render(request, 'view_results/View_items.html',{
        'model_list':models,
        })

标签： djangodjango-modelsdjango-templatesdjango-views

解决方案

完全可以填充正确的容器，而无需重新加载页面。

通常所做的是将views.py 中的函数分为第一次渲染和从AJAX POST 返回的情况。在您的情况下，views.py 将类似于：

if request.method == 'POST': # Returning from AJAX
    selected_item_by_user = request.POST.get('selected_item')
    models = self.get_all_models(selected_item_by_user)  #Fetches a list.
    return JsonResponse({'completed': "ok", 'list': models})

else:  # First time render
    item_history = self.get_item_list(shopid)     #Fetches a list
    return render(request, 'view_results/View_items.html',{
         'item_list':item_history,
       })

如您所见，我只在第一次渲染了模板。当你从 AJAX 回来时，我只调用JsonResponse. 将以下导入添加到您的代码中：

from django.http import JsonResponse

请注意，根据您的列表的构建方式（您尚未提供详细信息），您需要对其进行编码。

然后，在success您的 AJAX 方法的函数中，您可以轻松使用list（调整它以便填充正确的容器）：

success: function(data){console.log(data.list)}

因此，将填充正确的容器，而无需重新渲染/刷新页面。

编辑 1

现在我看到您还在 AJAX 方法中重定向到不同的 url。如果您不想刷新，请在 AJAX 方法中设置您的 url，如下所示：

$.ajax({
    type:'POST',
    url: window.location.href,
    data:{
        selected_item:item_index,
        csrfmiddlewaretoken:"{{ csrf_token }}"
    },
    dataType:"text",
    success: function(){$('#message').html("<h3>Data Submitted!</h3>") }
})

因此，您也只需要文件中的一个 url urls.py。

我不知道您的正确容器的 HTML 代码，但如果它是一个列表ul（假设它有一个id=list_conditions），您可以将一个项目添加到正确的容器中，如下所示：

// Get where I should add the index
let ul=document.getElementById("list_conditions");
// Create a new child
let li=document.createElement("li");
li.setAttribute("class", "list-group-item list-group-item-secondary");              
li.appendChild(document.createTextNode(data.list[0])); // Here you can replace by the index you need from the list
ul.appendChild(li);

推荐阅读