Question

我目前正在努力解决HTML响应问题。我有一个CSS，JS正常工作的HTML页面，用户将进行交互，然后转到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>

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(data);）来呈现新的HTML。在将CSS应用于您的body元素时要小心，因为浏览器（as it is said on this post）通常并不关心这些标签并将其删除。

这就是为什么在我获取的ajax数据中，我拥有主体和所有东西，但是当被浏览器渲染时，主体标签只是消失了。

如果您需要将CSS标签应用于主体，只需添加一个div标签，然后在其上应用CSS即可：

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

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

在Django中接收新渲染时，CSS不适用于HTML页面

2 个答案: