两次 Ajax 调用一次只满足一个条件

Two Ajax calls only meet one condition at a time

我有以下脚本将我的 select 选项的 POST 发送到名为 requestaccess 的 url。这在仅使用两者中的一个时效果很好,但是当我更改另一个字段时,POST 的结果对于第一个是 None,对于第二个是正确的,反之亦然。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<select title ="accesslevelid" class="form-control" id="accesslevelid" onclick="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>
<script>
$(document).ready(function () {
    $('#accesslevelid').on('click', function () {
        var accesslevelid = $(this).val();
        $.ajax({ url: "{% url 'requestaccess' %}",
                headers: { 'X-CSRFToken': '{{ csrf_token }}' },
                data: {
                  accesslevelid: accesslevelid,
                },
                type: 'POST',
                success: function (result) {
                  ;
                },
              });
      });
  });
</script>
        </div>
        <div class="col">


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

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

          </select>
          <script>
          $(document).ready(function () {
              $('#phi').on('click', function () {
                  var phi = $(this).val();
                  $.ajax({ url: "{% url 'requestaccess' %}",
                          headers: { 'X-CSRFToken': '{{ csrf_token }}' },
                          data: {
                            phi: phi,
                          },
                          type: 'POST',
                          success: function (result) {
                            ;
                          },
                        });
                });
            });
          </script>

我的视图通过以下方式获得 POST 值:

selectedaccesslevel = request.POST.get('accesslevelid')
print(selectedaccesslevel)
selectedphi = request.POST.get('phi')
print(selectedphi)

但是,我的打印显示为:

None
1 or 2

or 

7, 5, 3, 6, 4
None.

我想要的结果显示为:

7, 5, 3, 6, or 4
1 or 2

也许只需为两个 select 编写一个单击函数,即每次单击 select 中的任何一个时,您都会获取两个 select 值并将其传递给视图,像这样:

 $(document).ready(function () {
          $('.my_select').on('click', function () {
              var phi = $('#phi').val();
              var accesslevelid = $('#accesslevelid ').val();
              $.ajax({ url: "{% url 'requestaccess' %}",
                      headers: { 'X-CSRFToken': '{{ csrf_token }}' },
                      data: {
                        phi: phi,
                        accesslevelid: accesslevelid
                      },
                      type: 'POST',
                      success: function (result) {
                        ;
                      },
                    });
            });
        });

不要忘记 添加 class 名称 'my_select' 到你的 selects.

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