JS静态文件的管理：代码似乎被下载了，但是没有

2024-05-13 11:44:41 发布

您现在位置：Python中文网/ 问答频道 /正文
7495 3

我有一个Django项目，有两个应用程序：注册和随机化

- django-project
   - registration
   - randomization
     - static
        - randomization
           - js
               - script.js
     - templates
        - randomization
           - stock.html
   - templates
     - layouts
        - _nav.html
        - base.html
     - home.html

我使用JQuery/ajax，但在我的所有模板中都重复使用，所以我想重构

script.js似乎已下载（browser debug network/status=200） 但当我运行ajax请求时，出现以下错误：

Not Found: /{% url "randomization:stock" %}

我尝试这样管理静态文件：

设置.py

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

随机化/static/randomization/js/script.js

$(document).ready(function() {

    //CORRECTION
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    //END CORRECTION

    $("#site").on("change", function(event){

        console.log($(this).val());
        //CORRECTION
        var csrftoken = getCookie('csrftoken');
        $.ajax({
            type: "POST",
            //url: '{% url "randomization:stock" %}',
            url: $("#site").data("randomization-url"), //CORRECTION
            data: {
                //csrfmiddlewaretoken: '{{ csrf_token }}',//CORRECTION
                csrfmiddlewaretoken: csrftoken,
                'site' : $(this).val(), 
            },
            dataType: 'html',
            success: function (data) {
                if (data.includes("Insufficient")) {
                    $("#alerte").html(data);
                    $("#randomize").children().remove();
                }
                else {
                    $("#alerte").children().remove();
                    $("#randomize").html(data);
                }
            }
        });
    });


    $("body")
    .on("click", '#informations', function(event) {
        $('#pharmacy').modal('show');
    })

    .on('click','#button_ok',function(event){
        $(this).modal('close')
    });

});

base.html

{% load static i18n %}
{% load static %}
{% load widget_tweaks %}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">


{% block extrahead %}{% endblock %}

    <title>{% block title %}{% endblock %}</title>

  </head>
  <body>
    {% include 'layouts/_nav.html' %}     
    {% block content %}{% endblock %}
    {% include 'randomization/_alerte.html' %}
    {% include 'layouts/_footer.html' %}
    <!--09/11/2019 : config qui fonctionne-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <!--09/11/2019 : config qui fonctionne-->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="{% static 'randomization/js/script.js' %}"></script>   
    {% block extrabody %}{% endblock %}

  </body>
</html>

页面.html

{% extends 'layouts/base.html' %}
{% load i18n %}
{% load static %}
{% block title %}{% trans 'Homepage' %} | Intense TBM{% endblock %}
{% block content %}

<div class='container'>
<h1>page.html</h1>
</div>

{% endblock %}

Tags： namecomdatacookiehtmljsscriptstatic
1条回答
网友
1楼 · 发布于 2024-05-13 11:44:41

只能在Django模板中使用模板标记。静态文件只是通常由web服务器（apache、nginx）按原样提供服务或由CDN提供服务的文件

你可以这样做：

$（文档）.ready（函数（）{

$("#site").on("change", function(event){

    console.log($(this).val());

    $.ajax({
        type: "POST",
        url: $("#site").data("randomization-url"),
        ...

然后在定义id为“site”的html标记的模板中，执行以下操作：

<div id="site" data-randomization-url="{% url 'randomization:stock' %}"></div>

通过这种方式，您的元素定义了应该使用的URL，您不必担心任何奇怪的东西被注入到javascript中。而且您不必在javascript中使用硬编码url路径

相关问题 更多 >

    编程相关推荐