抱歉，我无法提供更准确的主题标题，我必须承认我仍然是 Django 的新手。
我正在尝试使用 Ajax 和带有 Split View的模板，但我无法以某种方式实现我想要的。
我的目标是能够使用呈现的模板和 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'),
]
我的 View 索引呈现了一个模板化的“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 View 中呈现的 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 我的页面内容被呈现的库存页面所取代，但这不起作用。
使用 Web 开发人员工具时，如果我在新选项卡中打开库存的 XHR 请求，它工作正常，所以我假设我做错了什么。
在将所有内容合并到一个文件(js、 View 、html 等)中之前，我想问一下是否有类似工作的方法？
谢谢你的帮助
最佳答案
您的源页面没有“inventoryblock”div。这仅在您通过 Ajax 加载的页面中。因此，当您的成功函数运行时，它不知道将输出放在哪里。
您需要在您的 index.html 中放置一个 ID 为“inventoryblock”的空 div。
此外，您的 inventory.html 可能不应该继承任何内容。您不需要带有 head block 等的完整 HTML 文件，您只需要包含可以插入到请求页面中的 inventoryblock 内容的片段。删除相关 HTML 本身以外的所有内容。
关于javascript - django 使用模板 View 和 ajax，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52725053/