CSS 在 Django 中接收新渲染时未应用于 HTML 页面

Question

我目前正在努力解决 HTML 响应的问题。我有一个 HTML 页面，其中 CSS，JS 工作正常，用户将进行交互，该交互将转到 JS -> 发送 ajax 请求并在工作视图中进行一些处理。这个视图给我返回一个渲染视图，其中包含所有更新的信息。

问题是给定的 HTML 包含所有内容，但看起来像 "raw" HTML a.k.a 没有应用 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>

Answer 1

settings.py

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

urls.py（项目不是应用程序）

from django.conf import settings
from django.conf.urls.static import static
...

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Answer 2

我在这个问题上找到了问题。如果您尝试使用 ajax 并通过简单地将所有内容替换为 Jquery 来呈现新的 HTML，就像我所做的那样 ($("*").html(data);)。在 body 元素上应用 CSS 时要小心，因为浏览器 (as it is said on this post) 通常不关心这些标签并将其删除。

这就是为什么在我检索到的 ajax 数据中，我有正文和所有内容，但是当浏览器呈现时，正文标签就消失了。

如果您需要将 CSS 标签应用于正文，只需像这样添加一个 div 标签并在其上应用您的 css :

<body>
  <div id="body">
    .... 
  </div>
</body>

唯一奇怪的是，当您使用 Django F5 页面时，body 标签又回来了，所以第一眼看起来还不错，但在没有刷新的情况下呈现时，没有显示 body 标签。

CSS 在 Django 中接收新渲染时未应用于 HTML 页面

CSS not applying to HTML page when receiving a new render in Django

django

django-templates

django-staticfiles