Ajax调用在单击时起作用，但在按下submit按钮时不起作用

我在Django中有以下HTML模板，当用户选择select选项时，可以发布请求。控制台根据用户的选择显示正确的值。我的问题是，当我按下submit按钮时，我的帖子在Submited视图中会以None的形式发布。我怎样才能让它在点击按钮时发布，我已经将按钮化名为我的选择

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <form action = "{% url 'submitted' %}" form method = "POST">
    {% csrf_token %}
          <h2>Applications:</h3></br>

            {% for app in retreivecheckbox %}
            <li><input type="checkbox" name="report_id" value ="{{app.report_id}}" checked> {{ app }}
              </li>
            {% endfor %}
        </div>

      </div>


      <div class="row">
        <div class="col">
          <label for="accesslevel"><h3>Access Level</h3></label>


<select title ="accesslevelid" class="form-control my_select" id="accesslevelid">
            <option value=""> Please select your access level  </option>
            <option value="7"> Facility  </option>
            <option value="5"> Division  </option>
            <option value = "3"> Corporate  </option>
            <option value = "6"> Market  </option>
            <option value = "4"> Group  </option>
</select>

        </div>
        <div class="col">


          <label for="phi"><h3>PHI</h3></label>

          <select class="form-control my_select" id="phi" title = "phi" >
            <option value = ""> Please select if you need access to PHI data </option>
            <option value = "0"> No  </option>
            <option value = "1"> Yes  </option>

          </select>

        </div>
      </div>

        <div class="row">
  <div class="container">
    <div class="row">
      <div class="col">
 </br> </br>

  <button href="{% url 'submitted' %}" class="btn btn-primary my_select" type = "submit"> Submit </button>
  <script>
  $(document).ready(function () {
      $('.my_select').on('click', function () {
          var phi = $('#phi').val();
          var accesslevelid = $('#accesslevelid ').val();
          $.ajax({ url: "{% url 'submitted' %}",
                  headers: { 'X-CSRFToken': '{{ csrf_token }}' },
                  data: {
                    phi: phi,
                    accesslevelid: accesslevelid,
                  },
                  type: 'POST',
                  success: function (result) {
                    ;
                  },
                });
        });
    });
  </script>


</div>


  </form>

{%csrf_令牌%}
应用程序：

{retreivecheckbox%中的应用程序的%s}
{{app}}

{%endfor%}
访问级别
请选择您的访问级别
设施
分部
公司的
市场
团体
PHI
请选择是否需要访问PHI数据
不
对



提交
$（文档）.ready（函数（）{
$（'.my_select'）。在（'click'，函数（）{
var phi=$（'#phi'）.val（）；
var accesslevelid=$（'#accesslevelid'）.val（）；
$.ajax（{url:{%url'已提交'%}），
标题：{'X-CSRFToken'：{{{csrf_token}}}，
数据：{
phi:phi，
accesslevelid:accesslevelid，
},
键入：“POST”，
成功：功能（结果）{
;
},
});
});
});

将按钮和javascript更改为：

<button class="btn btn-primary my_select" type="submit">Submit</button>
<script>
$(document).ready(function () {
    $('form').on('submit', function (e) {
        e.preventDefault();
        var phi = $('#phi').val();
        var accesslevelid = $('#accesslevelid').val();
        $.ajax({
            url: "{% url 'submitted' %}",
            headers: { 'X-CSRFToken': '{{ csrf_token }}' },
            data: {
                phi: phi,
                accesslevelid: accesslevelid,
            },
            type: 'POST',
            success: function (result) {
                // do something with result
            },
        });
    });
});
</script>

提交
$（文档）.ready（函数（）{
$（'form'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
var phi=$（'#phi'）.val（）；
var accesslevelid=$（'#accesslevelid'）.val（）；
$.ajax({
url:“{%url'已提交”%}”，
标题：{'X-CSRFToken'：{{{csrf_token}}}，
数据：{
phi:phi，
accesslevelid:accesslevelid，
},
键入：“POST”，
成功：功能（结果）{
//做一些有结果的事情
},
});
});
});

如果使用jQuery3.2.1，我通常会使用这个

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

$('form').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
        url: $(this).attr('action'),
        method: "POST",
        data: $(this).serialize()
    }).done(function(xhr) {
        // do something
    });
});

$（'form'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
$.ajax({
url:$（this.attr（'action'），
方法：“张贴”，
数据：$（this）.serialize（）
}).done（函数（xhr）{
//做点什么
});
});

同时更新您的select元素，使其具有

<select class="form-control my_select" id="phi" name="phi">

而不是

<select class="form-control my_select" id="phi" title = "phi" >

---

请注意，我已将“title”属性更改为“name”

我按照您的建议进行了更改，我假设您打算让“my_select”在“form”的位置。当我尝试使用表单时，它对我来说只是超时了。但是，在使用my_select提交的页面上，我对phi和accessleveid的POST结果为空。否它应该是“form”，因为它侦听提交事件，您使用的是哪个版本的jquery？