【问题标题】:django use of templates views and ajaxdjango使用模板视图和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 等)之前,我想问一下是否有类似工作的方法?

感谢您的帮助

【问题讨论】:

    标签: javascript jquery html django django-templates


    【解决方案1】:

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

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

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

    【讨论】:

    • 你好丹尼尔,最后我认为没有明显的其他方法,所以我按照你的建议进行,这意味着合并我的 index.html 中的所有内容,以便所有 DOM 元素都存在并且 javascript 可以运行.经过几次尝试,我认为在某些时候渲染阻止了 javascript 运行,所以我结束将我的 html div 放回主页并且它可以工作。我无法按照我想要的方式使用模板,但起初最好有一些工作。谢谢!
    猜你喜欢
    • 2012-05-25
    • 2018-04-06
    • 2012-05-26
    • 2012-01-13
    • 1970-01-01
    • 1970-01-01
    • 2018-04-05
    • 2012-11-13
    • 2015-03-24
    相关资源
    最近更新 更多