Question

我想创建一个django pp，其中有一个屏幕可以在点击按钮上动态添加文本字段。我使用嵌入在html文件中的javascript代码执行此操作。此html文件包含在django应用程序的templates文件夹中。

这是我的代码：

<script type = "text/javascript">
var counter = 1;
var limit = 5;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Email address " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}
</script>
<form method="POST">
     <div id="dynamicInput">
          Email Address 1<br><input type="text" name="myInputs[]">
     </div>
     <input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
</form>

但它会显示按钮和字段。但是当我点击按钮时，它不再添加该字段。这是什么错误？ django不允许以这种方式使用javascript吗？因为javascript是客户端而django在服务器端工作？如果是这样的话，我怎样才能使它工作？我是django的新手。请帮忙。

Answer 1

关于您是否可以将JavaScript和Django结合起来的问题。正如您所说，Django是在服务器端使用的技术，而JavaScript在客户端的客户端浏览器中执行。

但是，您可以使用Django的模型来准备应该在客户端执行的JS代码。您可以在模板的代码中执行此操作：

<script type = "text/javascript">
    var msg = '{{serverMsg}}';
    console.log(msg);
</script>

这将由Django评估，它将用{{serverMsg}}模型变量的实际值替换serverMsg。

据我所知，如果您将JS代码放在单独的* .js文件中，它将无法工作，因为这个文件不会被Django解析。

Answer 2

也许这是派生视图中的一个问题。试试这个：

在您的基本html视图中添加或查找（必须在<head>标记中）：

{% block scripts %}
{% endblock scripts %}

和（在<body>标签内）

{% block content %}
{% endblock content %}

然后在你的派生视图中：

  {% extends "your_base_file.html" %}
  {% block scripts %}
      Here goes your js code inside <script>
  {% endblock scripts %}
  {% block content %}
      Here goes your html form
  {% endblock content %}

我将你的脚本复制到我的Django项目中，它运行得很好。

如何在django中添加javascript功能

2 个答案: