POST要求がボタンのプレスで送信されない

Question

こんにちは私は複数のチェックボックスの選択を保存するためにajaxを有効にするPOST要求を送信したい、次のテンプレートがあります。コンソールを見ると、ユーザーがボタンを押すとG​​ET要求が表示されますが、これはなぜですか？

<form action=""> 
    <div class = "container"> 

     <div class="jumbotron"> 
     <div class="container"> 
      <h1 class="jumbotron-heading">Available Application List</h1></br> 
     </div> 
      <div class="container"> 

       <div class="row"> 
        <div class="col"> 
        <h3>Financial</h3> 

          <ul> 
          {% for app in fingrouplist %} 
          <li><input type="checkbox" name="request_reports" value ="{{app.report_id}}" > {{ app.report_name_sc }}</li> 
          {% endfor %} 
          </ul> 

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

        <h3>Care Assure</h3> 
        <div class = "row"> 

          <ul> 
          {% for app in cagrouplist %} 
          <li><input type="checkbox" name="request_reports" value ="{{app.report_id}}" > {{ app.report_name_sc }}</li> 
          {% endfor %} 
          </ul> 

        </div> 

        <div class = "row"> 
        <h3>Performance Improvement</h3> 

          <ul> 
          {% for app in pigrouplist %} 
          <li><input type="checkbox" name="request_reports" value ="{{app.report_id}}" > {{ app.report_name_sc }}</li> 
          {% endfor %} 
          </ul> 

        </div> 

        <div class = "row"> 
        <h3>Supply Chain</h3> 

          <ul> 
          {% for app in scgrouplist %} 
          <li><input type="checkbox" name="request_reports" value ="{{app.report_id}}" > {{ app.report_name_sc }}</li> 
          {% endfor %} 
          </ul> 

        </div> 

        <div class = "row"> 
        <h3>DSS Monitoring</h3> 

          <ul> 
          {% for app in dssgrouplist %} 
          <li><input type="checkbox" name="request_reports" value ="{{app.report_id}}" > {{ app.report_name_sc }}</li> 
          {% endfor %} 
          </ul> 

        </div> 

        <div class = "row"> 
        <h3>Other DSS Applications</h3> 

          <ul> 
          {% for app in othgrouplist %} 
          <li><input type="checkbox" name="request_reports" value ="{{app.report_id}}" > {{ app.report_name_sc }}</li> 
          {% endfor %} 
          </ul> 

        </div> 

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

        <h3>Behavior Health/Rehab</h3> 

          <ul> 
          {% for app in bhgrouplist %} 
          <li><input type="checkbox" name="request_reports" value ="{{app.report_id}}" > {{ app.report_name_sc }}</li> 
          {% endfor %} 
          </ul> 

        </div> 
        <div class="row"> 
        <h3>Clinical Excellence</h3> 
          <ul> 
          {% for app in cegrouplist %} 
          <li><input type="checkbox" name="request_reports" value ="{{app.report_id}}" > {{ app.report_name_sc }}</li> 
          {% endfor %} 
          </ul> 

        </div> 
        <div class="row"> 
        <h3>Perfomance Service Group</h3> 

          <ul> 
          {% for app in psggrouplist %} 
          <li><input type="checkbox" name="request_reports" value ="{{app.report_id}}" > {{ app.report_name_sc }}</li> 
          {% endfor %} 
          </ul> 

        </div> 
        <div class="row"> 
        <h3>All Applications</h3> 

          <ul> 
          {% for app in allgrouplist %} 
          <li><input type="checkbox" name="request_reports" value ="{{app.report_id}}" > {{ app.report_name_sc }}</li> 
          {% endfor %} 
          </ul> 

        </div> 
        </div> 


       </div class="row"> 

       </br></br> 
       <a href="{% url 'requestaccess' %}" /> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
       <script> 
       $(document).ready(function(){ 
        var selected_items = []; 
        $(".checkbox").click(function(){ 
         var selected_item = $(this).val(); 
         var index = selected_items.indexOf(selected_item); 
         if(index == -1) 
         { 
          selected_items.push(selected_item); 
         } 
         else{ 
          selected_items.splice(index, 1); 
         } 
        }); 
        $("#submit-button").click(function(){ 
         $.ajax({ 
          url: '/requestaccess/', 
          data: {'request_reports': selected_items.join(","), 'csrfmiddlewaretoken': {{csrfmiddlewaretoken}} }, 
          dataType: 'json', 
          type: 'post', 
          success: function (data) { 
          } 
         }); 
        }); 
       }) 
       </script> 

       <input class="btn btn-primary" type="button" method = "POST" value="Request Access"> 
       </div> 

    </form> 

これは、ユーザーがチェックボックスを選択するプロファイルページのビューです。

def profile(request): 
     owner = User.objects.get (formattedusername=request.user.formattedusername) 
     reportdetail = QVReportAccess.objects.filter(ntname = owner.formattedusername, active = 1).values('report_name_sc') 

     reportIds = QVReportAccess.objects.filter(ntname = owner.formattedusername).values_list('report_id', flat=True) 
     reportaccess = QvReportList.objects.filter(report_id__in= reportIds).values_list('report_name_sc', flat = True) 
     reportGroups = QVReportAccess.objects.filter(ntname = owner.formattedusername).values_list('report_group_id', flat=True) 
     reportlist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).exclude(active=0) 
     allreportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 100) 
     bhreportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 200) 
     cereportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 500) 
     finreportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 600) 
     careportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 800) 
     pireportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 1100) 
     screportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 1200) 
     dssreportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 1300) 
     psgreportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 1400) 
     othreportgrouplist = QvReportList.objects.filter(~Q(report_id__in= reportIds)).filter(report_group_id = 99999) 

#  if request.method == 'POST': 
#   reportnamesc = request.POST.get('report_name_sc', '') 
#   checked = request.POST.get('request_reports', '') 
#   request_reports = #request_reports.objects.get(report_name_sc=reportnamesc) 
#   request_reports.request_reports = checked 
#   request_reports.save() 

     args = {'user':owner, 'applicationaccess':reportaccess, 'applicationlist':reportlist, 'bhgrouplist':bhreportgrouplist, 'cegrouplist':cereportgrouplist, 'fingrouplist':finreportgrouplist 
       , 'cagrouplist':careportgrouplist, 'pigrouplist':pireportgrouplist, 'scgrouplist':screportgrouplist, 'dssgrouplist':dssreportgrouplist, 'psggrouplist':psgreportgrouplist 
       , 'othgrouplist':othreportgrouplist, 'allgrouplist':allreportgrouplist} 

     return render(request, 'accounts/profile.html', args) 

しかし、私のポストは、Ajaxが、私がチェックしたレポートでのみプルに私のフォーム上のrequest.POST [「request_reports」]を行うことができます私の値は保存されません発生したことがないと。

1つのhtmlテンプレートからフォームへのユーザー選択にレポートを縮小するタスクを達成するためのより良い方法があれば、私は提案しています。

Answer 1

ボタンのデフォルトのアクション（フォームを送信する）を禁止しないでください。このアクションは、デフォルトのアクションGETを使用します。

クリックイベントハンドラをeventパラメータにしてevent.preventDefault();を呼び出します。