Javascript django使用模板视图和ajax_Javascript_Jquery_Html_Django_Django Templates

Javascript django使用模板视图和ajax

javascript jquery html django

Javascript django使用模板视图和ajax,javascript,jquery,html,django,django-templates,Javascript,Jquery,Html,Django,Django Templates,很抱歉，我不能提供一个更准确的主题标题，我必须承认我还是一个非常新的Django 我正在尝试使用Ajax和带有拆分视图的模板，但无论如何，我都无法实现我想要的我的目标是能够使用呈现模板和jquery隐藏/显示指令，但我在某些方面失败了这是我的URL.py： from django.urls import path from django.conf.urls import url from . import views, inventory urlpatterns = [ path(

很抱歉，我不能提供一个更准确的主题标题，我必须承认我还是一个非常新的Django

我正在尝试使用Ajax和带有拆分视图的模板，但无论如何，我都无法实现我想要的

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

这是我的URL.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”（我在插图中删除了一个上下文）：

My index.html文件：

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

和my inventory.html：

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

所以就像我说的，我希望onclick我的页面的内容被呈现的清单页面替换，但这不起作用

在使用web开发工具时，如果我在新选项卡中打开清单的XHR请求，它就可以正常工作，因此我认为我做的事情是错误的

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

感谢您的帮助

您的源页面没有“inventoryblock”div。这只在您通过Ajax加载的页面中。因此，当成功函数运行时，它不知道将输出放在哪里

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

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

你好，Daniel，最后我认为没有明显的其他方法，因此我按照您的建议继续，这意味着合并index.HTML中的所有内容，以便所有DOM元素都存在，javascript可以运行。经过几次尝试后，我认为在某个点上呈现阻止了javascript的运行，因此我结束了将html div放回主页的工作。我无法按照预期的方式使用模板，但一开始最好是让一些东西工作起来。谢谢

{% 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>

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

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

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