如何在 django 模板中实现 javascript 代码？

Question

我试图阻止按下按钮时提交。 但是使用我的 javascript 代码，当按下提交按钮时，该按钮仍会刷新页面。 这是我的代码（不起作用）：

<html>
   <head>
       <title>tangina</title>
   </head>

   <body>
       <form action="POST" class='user-signup-form'>
           {% csrf_token %}

           <input type="text">
           <button type="submit">submit</button>
       </form>


       <script>
           $(document).ready(function(){
               var userForm = $(".user-signup-form")

               userForm.submit(function(event){
                   event.preventDefault();
               })
           });
       </script>

       <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
       <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   </body>
</html>

这只是一个简单的代码，我只是试图阻止按钮在按下时提交表单。 我在这里做错了什么？

Answer 1

先试试你的 html 代码，你会发现没有什么可以处理 django 的。

$ 尚未定义。 因为 jquery 还没有加载。

只需查看此答案即可了解您的错误：

$(document).ready(function(){}); vs 页面底部的脚本

此外，您可以打开控制台（按 F12）以获取有关您的问题的更多信息。

Answer 2

出现问题是因为您在加载 jQuery 库 js 文件之前尝试执行 jQuery 代码将以下代码片段移动到所有其他脚本下方。

   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
       $(document).ready(function(){
           var userForm = $(".user-signup-form")

           userForm.submit(function(event){
               event.preventDefault();
           })
       });
   </script>

如何在 django 模板中实现 javascript 代码？

问题描述

2 个解决方案

解决方案1
0 已采纳 2019-12-18 08:33:33

解决方案2
0 2019-12-18 08:39:39

如何在 django 模板中实现 javascript 代码？

问题描述

2 个解决方案

解决方案1 0 已采纳 2019-12-18 08:33:33

解决方案2 0 2019-12-18 08:39:39

解决方案1
0 已采纳 2019-12-18 08:33:33

解决方案2
0 2019-12-18 08:39:39