Question

对不起，我无法提供更准确的主题标题，我必须承认我还是一个相当新的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>

现在我要实现的目标是，在我的stocking.js中，我有一个onclick事件，我试图使用该事件来隐藏主页内容，并用我的清单.py视图中的呈现的html替换它与相关的html：

我的stock.py：

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

和我的stock.html：

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

最后，我的stock.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我的页面内容被呈现的清单页面替换，但这不起作用。

使用Web开发工具时，如果我在新选项卡中打开针对库存的XHR请求，它就可以正常工作，因此我认为我做错了事。

在将所有内容合并到一个文件（js，views，html等）中之前，我想问一下是否有办法使类似的东西起作用？

谢谢您的帮助

Answer 1

您的源页面没有“广告空间阻止” div。那只是在您通过Ajax加载的页面中。因此，当您的成功函数运行时，它不知道将输出放在何处。

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

此外，您的stock.html可能不应继承任何内容。您不需要带有标题块等的完整HTML文件，您只需要包含可以插入到请求页面中的清单块内容的片段。删除相关HTML本身以外的所有内容。

django使用模板视图和ajax

1 个答案: