【发布时间】：2019-11-03 07:52:37
【问题描述】：
我目前正在努力解决 HTML 响应的问题。 我有一个带有 CSS 的 HTML 页面，JS 工作正常，用户将进行交互，该交互将转到 JS -> 发送 ajax 请求并在工作视图中进行一些处理。这个视图给了我一个渲染的视图，所有的信息都更新了。
问题是给出的 HTML 包含所有内容，但看起来像“原始”HTML，也就是没有应用 CSS，（脚本工作正常）
在我的 HTML 文件的头部：
<head>
<meta charset="utf-8">
<title>Sorting video: {{video.title}}</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://www.w3schools.com/w3css/4/w3.css">
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'modelReco/cssFiles/swipeFrames.css' %}?v=00002'">
<script type="text/javascript" src='{% static "modelReco/jsScript/swipeFrames.js" %}?v=00003'></script>
</head>
呈现 HTML 的视图：
def sendSortVideoResponse(request,untreatedFrame,myVideo,frames,tracks,url):
response = render(request, url, {
'video':myVideo,
'frames':frames,
'tracks':tracks,
'untreatedFrame': untreatedFrame[0],
'countTreated': untreatedFrame[1],
'totalFrames': len(frames),
'progressBar': untreatedFrame[1]/len(frames)*100,
})
response["Cache-Control"] = "no-cache, no-store, must-revalidate"
response["Pragma"] = "no-cache" # HTTP 1.0.
response["Expires"] = "0" # Proxies.
return response
在 settings.py 中：
PROJECT_ROOT = os.path.join(os.path.dirname(__file__), '..')
SITE_ROOT = PROJECT_ROOT
MEDIA_ROOT = os.path.join(SITE_ROOT, 'media')
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(SITE_ROOT, 'static')
STATIC_URL = '/static/'
如果您对页面进行 F5，那么一切都会再次正常运行。 对于用户来说，他所在的页面不会重新加载，所以这可能是问题所在，但我有另一个样式表正在完美地运行进度条，所以我很困惑。 所以这可能是对静态文件的不好使用
编辑网络和页面：
编辑 2：呈现的 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sorting video: fashionShow2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="/static/modelReco/cssFiles/swipeFrames.css?v=00002'">
<script type="text/javascript" src='/static/modelReco/jsScript/swipeFrames.js?v=00003'></script>
</head>
<body>
<h1>Video: fashionShow2</h1>
<p>What can you do on this page?</p>
<p>You've chosen to sort the video fashionShow2, this means you want to help the A.I to recognize the model by simply clicking on the models and validate your answer</p>
<div id = 7951 class = "untreatedFrame" style="zoom:.6;-o-transform: scale(.6);-moz-transform: scale(.6)" >
<img class = "frameImg" src="/media/fashionShow2/frames/7951.png"/>
<a class = "frameImg" style="top: 0%; left: 65%; width: 35%; height: 100%;" onmouseover="displayValidation('rightCorner',true)" onmouseout="displayValidation('rightCorner',false)" onclick="validateFrameChoice(7951,1,true,'/modelReco/sortedTracks')">
<div id="rightCorner" class = "validationCorner"></div>
</a>
<a class = "frameImg" style="top: 0%; left: 0%; width: 35%; height: 100%;" onmouseover="displayValidation('leftCorner',true),true" onmouseout="displayValidation('leftCorner',false)" onclick="validateFrameChoice(7951,-1,false,'/modelReco/sortedTracks')">
<div id="leftCorner" class = "validationCorner"></div>
</a>
</div>
<div class="w3-container">
<div class="w3-light-grey w3-round-xlarge">
<div class="w3-container w3-blue w3-round-xlarge" style="width:73.01587301587301%">46/63</div>
</div>
</div>
<input type="button" value="Cancel previous choice" onclick="cancelPreviousChoice(7951)" />
<form action="/modelReco/">
<input type="submit" value="Return to home" />
</form>
<script>
</script>
</body>
</html>
【问题讨论】：
-
手动打开生成的静态文件 URL 并显示 HTTP 响应状态。
-
操作后还要检查 HTML 的有效性。
-
我在在线验证器上检查了它，除了一些警告之外，没什么特别的，我在交互后编辑了我的 HTML
标签： django django-templates django-staticfiles