django使用模板视图和ajax

Posted 2023-02-24

技术标签:

【中文标题】django使用模板视图和ajax【英文标题】：django use of templates views and ajax 【发布时间】：2019-03-14 11:16:18 【问题描述】：

抱歉，我无法提供更准确的主题标题，我必须承认我还是个 Django 新手。

我正在尝试使用 Ajax 和具有拆分视图的模板，但我无法以一种或另一种方式实现我想要的。

我的目标是能够使用呈现的模板和 jquery 隐藏/显示指令，但我在某些时候失败了。

这是我的 urls.py：

from django.urls import path
from django.conf.urls import url
from . import views, inventory

urlpatterns = [
    path('', views.index, name='index'),
    url(r'^inventory', inventory.inventory, name='inventory'),
    url(r'^buildInventory', inventory.buildInventory, name='buildInventory'),        
]

我的视图索引呈现一个模板化的“index.html”（我为插图删除了一个上下文）：

def index(request):
    return render(request, 'myapp/index.html', context)

我的 index.html 文件：

% extends "base.html" %
% load static %
% block delivery_form %
    <div id="mainblock">
    ....
    </div>
% endblock %

我的 base.html 主要包含我的静态和标题：

% load static %
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="shortcut icon" type="image/png" href="http://web-iec/favicon.ico"/>
        <link rel="stylesheet" type="text/css" href="% static 'myapp/css/nice.css' %">
        <script type="text/javascript" src="% static 'myapp/js/jquery.js' %" ></script>
        <script type="text/javascript" src="% static 'myapp/js/jquery-ui.js' %" ></script>
        <script type="text/javascript" src="% static 'myapp/js/inventory.js' %" ></script>
        <script type="text/javascript" src="% static 'myapp/js/homepage.js' %" ></script>
        </head>
        <body>       
        <div class="navBar">
            <span class="navBtn" id="listDeplVer" title="Inventory">Inventory</span>
        </div>    
        <div style="min-height: 100%;margin-bottom: -20px;">
            % block delivery_form %    
            % endblock %

            % block inventory %    
            % endblock %
        </div>
    </body>

</html>

现在我想要实现的是，在我的 inventory.js 中，我有一个 onclick 事件，我试图用它来隐藏主页内容并将其替换为我的 inventory.py 视图中呈现的 html与相关的 html：

我的库存.py：

def inventory(request):
    return render(request, 'myapp/inventory.html')

还有我的inventory.html：

% extends "base.html" %
% load static %
% block inventory %
<div id="inventoryblock">
    // html
</div>
% endblock %

最后我的 inventory.js 看起来像：

$(document).ready(function () 
    $( "#listDeplVer" ).click( function () 
        $.ajax(
            type: 'GET',
            dataType: 'html',
            url: '/myapp/inventory',
            beforeSend: function()
                $("#mainblock").fadeOut();
            ,
            success : function(output)
                $("#inventoryblock").html(output);
            ,
        );
);

就像我说的那样，我期望 onclick 我的页面内容被呈现的库存页面替换，但这不起作用。

使用网络开发工具时，如果我在新标签页中打开库存的 XHR 请求，它工作得很好，所以我认为我做错了。

在将所有内容合并到一个文件中（js、视图、html 等）之前，我想问一下是否有类似工作的方法？

感谢您的帮助

【问题讨论】：

【参考方案1】：

您的源页面没有“inventoryblock” div。那只是在您通过 Ajax 加载的页面中。所以当你的成功函数运行时，它不知道把输出放在哪里。

您需要在 index.html 中放置一个 ID 为“inventoryblock”的空 div。

另外，您的 inventory.html 可能不应该从任何东西继承。您不需要带有 head 块等的完整 HTML 文件，您只需要包含可以插入到请求页面中的 inventoryblock 内容的片段。删除相关 HTML 本身以外的所有内容。

【讨论】：

你好丹尼尔，最后我认为没有明显的其他方法，所以我按照你的建议进行，这意味着合并我的 index.html 中的所有内容，以便所有 DOM 元素都存在并且 javascript 可以运行.经过几次尝试，我认为在某些时候渲染阻止了 javascript 运行，所以我结束将我的 html div 放回主页并且它可以工作。我无法按照我想要的方式使用模板，但起初最好有一些工作。谢谢！

以上是关于django使用模板视图和ajax的主要内容，如果未能解决你的问题，请参考以下文章