POST-Anforderung nicht auf Tastendruck gesendet

Question

Hallo Ich habe die folgende Vorlage, die ich bin zu wollen eine POST-Anforderung senden, um die Ajax zu aktivieren die Auswahl der mehrere Kontrollkästchen zu speichern. Wenn ich die Konsole betrachte, wird eine GET-Anfrage angezeigt, wenn der Benutzer die Taste drückt, warum?

<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> 

Dies ist die Ansicht für die Profilseite, auf der der Benutzer die Kontrollkästchen auswählt.

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) 

Aber mit meinem Beitrag nie die Ajax vorkommende nicht meine Werte speichern, wo ich eine request.POST tun kann [ ‚request_reports‘] auf meiner Form nur in den Berichten zu ziehen, die überprüft wurden.

Ich bin offen für Vorschläge, wenn es eine bessere Art und Weise ist die Aufgabe der Reduzierung der Berichte an einen Benutzer einer Auswahl aus einer HTML-Vorlage in eine Form zu erreichen.

Answer 1

Sie verhindern nicht die Standardaktion der Taste, die das Formular abzuschicken ist - was wiederum die Standard-Aktion verwendet, GET.

Geben Sie Ihrem Click Event Handler einen event Parameter und rufen Sie event.preventDefault(); an.