如何在Django表单提交中使用Ajax调用来防止页面刷新？

Question

我想防止表单提交时刷新页面。请帮忙。 尝试了许多可用在网络上的ajax调用，但没有一个起作用。 我目前正在django中从事一个项目，并已将django表单用于特定目的。 我添加了一些代码并修改了某些部分，但帖子仍无法提交。 这是我的html脚本：

$('#f').submit(function(e) {
       e.preventDefault();
       window.scrollTo(5000,500);

       // a sample AJAX request
       $.ajax({
         url : this.action,
         type : this.method,
         data : $(this).serialize(),
         success : function(response) {
           alert('success');
         }
       });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form class="post-form w3-animate-top" style="display:none" method='POST' id="f">
  {% csrf_token %}
  <div class="container">
    <div class="col-sm-20">
      <div class="card card-user" id="back">
        <div class="card-header">
          <h5 class="card-title">Create Sprint</h5>
        </div>

        <div class="card-body">
          <div class="row">
            <div class="col-md-6 pr-1">
              <div class="form-group">
                <label>Sprint Name</label>
                {{ form.name }}
              </div>
            </div>
          </div>

          <div class="row">
              <div class='col-md-6 pr-1'>
                  <div class="form-group">
                      <label>Sprint Start Date</label>
                      <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                        {{ form.sprint_start_date }}
                        <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                          <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                      </div>

                      <script>
                        $(function () {
                          $("#datetimepicker1").datetimepicker({
                            format: 'DD/MM/YYYY',
                          });
                        });
                      </script>

                  </div>
              </div>
          </div>

          <div class="row">
              <div class='col-sm-8 pr-1'>
                  <div class="form-group">
                      <label>Sprint Dev End Date</label>
                      <div class="input-group date" id="datetimepicker2" data-target-input="nearest">
                        {{ form.sprint_dev_end_date }}
                        <div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
                          <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                      </div>

                      <script>
                        $(function () {
                          $("#datetimepicker2").datetimepicker({
                            format: 'DD/MM/YYYY',
                          });
                        });
                      </script>

                  </div>
              </div>
          </div>

          <div class="row">
              <div class='col-sm-8 pr-1'>
                  <div class="form-group">
                      <label>Sprint QA End Date</label>
                      <div class="input-group date" id="datetimepicker3" data-target-input="nearest">
                        {{ form.sprint_qa_end_date }}
                        <div class="input-group-append" data-target="#datetimepicker3" data-toggle="datetimepicker">
                          <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                      </div>

                      <script>
                        $(function () {
                          $("#datetimepicker3").datetimepicker({
                            format: 'DD/MM/YYYY',
                          });
                        });
                      </script>

                  </div>
              </div>
          </div>

          <div class="row">
            <div class="col-md-6 pr-1">
              <div class="form-group">
                <label>Holidays Available</label>
                {{ form.holidays }}
              </div>
            </div>
          </div>

          <div class="row">
            <div class="update ml-auto mr-auto">
              <input type="button" name="sprint_button" class="btn btn-primary btn-round" id="reg1" value="Create Sprint">
            </div>
          </div>

          <div class="row">
            <div class="update ml-auto mr-auto">
              <button class="btn btn-primary btn-block" onclick="w4_close()" id="sprint_close">Close</button>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</form>