JavaScriptでページ上のすべてのフォームを一度にajaxを使ってDjangoに送信する

Question

idにGUIDが付いた複数のフォームを持つページがあります。私はスタックポストの合併症からこのJavaScriptを書いた。私はJavaScriptでそれほど優れていません。

フォームを送信すると、フォームのテキストボックスが消え、djangoに渡されたデータにはポスト値がありません。 console.log(formData[0]);を使用してajaxでシリアライズして送信する直前にフォームを記録すると、フォームデータとすべての要素がログに記録されます。

私はポスト値を印刷し、完全に空白のdjangoを使ってポスト値をページに返します。提出はフォームをシリアル化していません。これは、主生成フォームfrmCollectorに添付されたフォームの配列として存在するためです。私がdjangoにヌルを提出するとき。すべてのフォームを組み合わせて、ajax submitを使ってdjangoにオブジェクトとして送信するにはどうすればいいですか？私はそれがjsonオブジェクトを構築することで大丈夫だろう。フォームにはユニークなuuidsがあるので、私はそれらが何であるか分からない。私はリストを作成することができますが、私はJavaScriptでこれを行うより効率的な方法があると確信しています。ここで

は、これまでフルスクリプトコードです：ここ

<script> 
    function submitAllDocumentForms() { 
     var alldata = {}; 

     $("form").each(function(i, form){ 

      var current_data = $(form).serializeArray(); 
      console.log($(form).serializeArray()); 
      alldata[$(form).prop("id")] = current_data; 

     }); 

     alert(JSON.stringify(alldata)); 

     $.ajax({ 
      type:'POST', 
      url:'save_stacks/', 
      data: JSON.stringify(alldata), 
      success: function(response) { 
      console.log(response); 
      } 
     }); 
    } 

     var stack_name = ""; 
     var stack_id_out = ""; 
     var globalWidth = ""; 

     var stacksHash = {}; 

     function guid() { 
      function s4() { 
      return Math.floor((1 + Math.random()) * 0x10000) 
       .toString(16) 
       .substring(1); 
      } 
      return s4() + s4() + '-' + s4() + '-' + s4() + '-' + 
      s4() + '-' + s4() + s4() + s4(); 
     } 

     function generate_stack_list(idobject){ 
      var update_list_html = ""; 
      $.each(stacksHash, function(i, item) { 
       update_list_html += '<option value="'+stacksHash[i].stackid+'">'+stacksHash[i].stackid+'</option>'; 
      }); 
      var id_out = idobject.id.replace(/SecurityGroup/g, "stack_name"); 
      document.getElementById(id_out).innerHTML = update_list_html; 
     } 

     function generate_stack(id){ 
      var stackName = prompt("Please enter your stack name", "storm-nimbus"); 
      var uuid = guid(); 

      var id_out = id.replace(/UUID/g, uuid); 
      id_out = id_out.replace(/Hide/g, ""); 
      id_out = id_out.replace(/StackName/g, stackName); 
      //stack_ids.set("stackid", id_out); 

      stacksHash[id_out]= {"stackid":id_out}; 
      stack_id_out = id_out; 
      var rawFile = new XMLHttpRequest(); 

      rawFile.open("GET", "{% static 'divTemplates/stack.html' %}", false); 

      rawFile.onreadystatechange = function() 
      { 
       if(rawFile.readyState === 4) 
       { 
        if(rawFile.status === 200 || rawFile.status == 0) 
        { 
         var allText = rawFile.responseText; 

         var html_out = allText.replace(/UUID/g, uuid); 

         var html_out_final = html_out.replace(/STACKNAME/g, id_out); 

         var current_html = document.getElementById("dynamic_content").outerHTML; 

         document.getElementById("dynamic_content").outerHTML = html_out_final + current_html; 

         globalWidthid = "#"+uuid; 
         globalWidth = $(globalWidthid).css("width"); 

        } 
       } 
      } 
      rawFile.send(null); 

      //generate multiple list options and software options for the stack 
      var html_anaconda_options = ""; 
      var second_index_position = ""; 
      var first_index_position = ""; 
      var anaconda_data = ""; 
      var number_of_anacondas = ""; 

      options_id_anaconda = "#SoftwareTab-Anaconda-"+uuid; 
      options_id_anaconda_input = "#SoftwareTab-Anaconda-Search-"+uuid; 
      options_id_anaconda_links = "#SoftwareTab-Anaconda-Links-"+uuid; 

      $.get("anaconda/", function(data) { 
       anaconda_data = data[0]; 
       var count = 0; 
       $.each(data, function(index) { 
        $.each(data[index], function(index2) { 
         number_of_anacondas++; 
         count++; 
         if(count < "3000"){ 
          add_html_options(data[index][index2]); 
          second_index_position = index2; 
          first_index_position = index; 

         } 
        });     
       }); 
       set_html_anaconda_options(); 
      }); 

      function add_html_options(data){ 
       html_anaconda_options += "<option value='"+data.package+"-"+data.version+"'>"+data.package +"-"+ data.version +"-"+ data.os +"-"+ data.channel +"-"+"</option>";    
      } 



      function set_html_anaconda_options(){ 
       $(options_id_anaconda).html(html_anaconda_options); 
       //console.log(anaconda_data[first_index_position][second_index_position]); 
       $(options_id_anaconda_links).html("<p style='float:right;'>"+first_index_position + " - " + second_index_position + " of " + number_of_anacondas + "<button style='margin-left:5px;margin-top:5px;' class='btn btn-success' id='anaconda-link-next-"+uuid+"+"+second_index_position+"' onclick='next_anaconda(this)' href='#'>"+" Next "+second_index_position+"</button></p>"); 
      } 
     } 

     function next_anaconda(next_value_starting_point){ 

      var id_tag_information = next_value_starting_point.id.replace(/anaconda-link-next-/g, ""); 
      var uuid = id_tag_information.split("+")[0]; 
      var number_of_range = id_tag_information.split("+")[1]; 
      var next_max = id_tag_information.split("+")[1] * 2; 

      var html_anaconda_options = ""; 
      var anaconda_data = ""; 
      var number_of_anacondas = ""; 
      var second_index_position = ""; 
      var first_index_position = ""; 

      $(options_id_anaconda).html(""); 

      options_id_anaconda = "#SoftwareTab-Anaconda-"+uuid; 
      options_id_anaconda_input = "#SoftwareTab-Anaconda-Search-"+uuid; 
      options_id_anaconda_links = "#SoftwareTab-Anaconda-Links-"+uuid; 

      $.get("anaconda/", function(data) { 

       anaconda_data = data; 
       var count = number_of_range; 
       $.each(data, function(index) { 
        $.each(data[index], function(index2) { 
         number_of_anacondas++; 
         if (count == index2){ 
          count++; 
          if(count < next_max){ 
            add_html_options_update(data[index][index2]); 
            second_index_position = count; 
            first_index_position = next_max; 
          } 
         } 
        });     
       }); 
       set_html_anaconda_options_update(); 
      }); 
      function add_html_options_update(data){ 
       html_anaconda_options += "<option value='"+data.package+"-"+data.version+"'>"+data.package +"-"+ data.version +"-"+ data.os +"-"+ data.channel +"-"+"</option>";    
      } 
      function set_html_anaconda_options_update(){ 
       $(options_id_anaconda).html(html_anaconda_options); 
       var next_max_count = second_index_position *2; 
       $(options_id_anaconda_links).html("<p style='float:right;'>"+first_index_position + " - " + next_max_count + " of " + number_of_anacondas + "<button class='btn btn-success' style='margin-left:5px;margin-top:5px;' id='anaconda-link-next-"+uuid+"+"+second_index_position+"' onclick='next_anaconda(this)' href='#'>"+" Next "+second_index_position+"</button></p>"); 
      } 

     } 
     function delete_stack(id){ 
      var answer = prompt("Are you sure?", "yes"); 
      if (answer == "yes"){ 
       id = "#"+id; 
       $(id).remove();  
      }else{ 
      } 
     } 

     function delete_blockdevice(deviceObject){ 
      var answer = prompt("Are you sure?", "yes"); 
      if (answer == "yes"){ 
       var id = deviceObject.id.replace(/DB/g, ""); 
       id = "#"+id; 
       $(id).remove();  
      }else{ 
      } 

     } 
     //this is the code that generates a block device div form 
     //uses 
     function generate_blockdevice(idObject){ 
      var bd_uuid = guid(); 
      var rawFile = new XMLHttpRequest(); 
      var stackID = idObject.id.replace(/BD/g, ""); 
      var contentID = "block_device_content-"+ stackID; 
      rawFile.open("GET", "{% static 'divTemplates/blockdevice.html' %}", false); 

      rawFile.onreadystatechange = function() 
      { 
       if(rawFile.readyState === 4) 
       { 
        if(rawFile.status === 200 || rawFile.status == 0) 
        { 
         var bdallText = rawFile.responseText; 
         var insert_uuid = stackID + "-bd_uuid-" + bd_uuid; 
         var html_out = bdallText.replace(/BDUUID/g, insert_uuid); 

         var current_html = document.getElementById(contentID).outerHTML; 

         document.getElementById(contentID).outerHTML = html_out + current_html; 
        } 
       } 
      } 
      rawFile.send(null);  

     } 

      //this deletes a block device 
     function delete_generate_security_group(deviceObject){ 
      var answer = prompt("Are you sure?", "yes"); 
      if (answer == "yes"){ 
       var id = deviceObject.id.replace(/DB/g, ""); 
       id = "#"+id; 
       $(id).remove();  
      }else{ 
      } 

     } 
     //this is the code that generates a block device div form 
     //uses 
     function generate_security_group(idObject){ 
      var sg_uuid = guid(); 
      var rawFile = new XMLHttpRequest(); 
      var stackID = idObject.id.replace(/SG/g, ""); 
      var contentID = "security_group_content-"+ stackID; 

      rawFile.open("GET", "{% static 'divTemplates/securitygroup.html' %}", false); 

      rawFile.onreadystatechange = function() 
      { 
       if(rawFile.readyState === 4) 
       { 
        if(rawFile.status === 200 || rawFile.status == 0) 
        { 
         var sgallText = rawFile.responseText; 
         var insert_uuid = stackID + "-sg_uuid-" + sg_uuid; 
         var html_out = sgallText.replace(/SGUUID/g, insert_uuid); 
         var current_html = document.getElementById(contentID).outerHTML; 
         document.getElementById(contentID).outerHTML = html_out + current_html; 
        } 
       } 
      } 
      rawFile.send(null);  

     }  


     function generate_envvar(idObject){ 
      var ev_uuid = guid(); 
      var rawFile = new XMLHttpRequest(); 
      var stackID = idObject.id.replace(/EV/g, ""); 
      var contentID = "evn-variable-data-"+ stackID; 

      rawFile.open("GET", "{% static 'divTemplates/envvar.html' %}", false); 

      rawFile.onreadystatechange = function() 
      { 
       if(rawFile.readyState === 4) 
       { 
        if(rawFile.status === 200 || rawFile.status == 0) 
        { 
         var evallText = rawFile.responseText; 
         var insert_uuid = stackID + "-ev_uuid-" + ev_uuid; 
         var html_out = evallText.replace(/EVUUID/g, insert_uuid); 
         var current_html = document.getElementById(contentID).outerHTML; 
         document.getElementById(contentID).outerHTML = html_out + current_html; 
        } 
       } 
      } 
      rawFile.send(null);  

     } 


     function disable_tab(passed){ 

      var id = passed.id.replace(/link-/g, ""); 

      var pres_id1 = "#"+"presentation1-"+id; 
      var pres_id2 = "#"+"presentation2-"+id; 
      var pres_id3 = "#"+"presentation3-"+id; 
      var pres_id4 = "#"+"presentation4-"+id; 
      var pres_id5 = "#"+"presentation5-"+id; 
      var pres_id6 = "#"+"presentation6-"+id; 
      var pres_id7 = "#"+"presentation7-"+id; 
      var pres_id8 = "#"+"presentation8-"+id; 
      var pres_id9 = "#"+"presentation9-"+id; 
      var pres_id10 = "#"+"presentation10-"+id; 
      var pres_id11 = "#"+"presentation11-"+id; 
      var pres_id12 = "#"+"presentation12-"+id; 
      var pres_id13 = "#"+"presentation13-"+id; 
      var pres_id14 = "#"+"presentation14-"+id; 

      var main_id = "#"+id; 
      var link_id = "#linl-"+id; 
      var finalId = "#contentPane-" + id; 
      var width=$(main_id).css("width"); 

      console.log(main_id); 

      console.log(width); 
      console.log(globalWidth); 
      if(width==globalWidth){ 
       $(main_id).css("width", "600px"); 
       $(link_id).css("background-color", "#FFF"); 


      } 

      if(width=="600px"){ 
       $(main_id).css("width", globalWidth); 
       $(link_id).css("background-color", "#FFF"); 
      } 

      $(pres_id1).fadeToggle("fast", function() {}); 
      $(pres_id2).fadeToggle("fast", function() {}); 
      $(pres_id3).fadeToggle("fast", function() {}); 
      $(pres_id4).fadeToggle("fast", function() {}); 
      $(pres_id5).fadeToggle("fast", function() {}); 
      $(pres_id6).fadeToggle("fast", function() {}); 
      $(pres_id7).fadeToggle("fast", function() {}); 
      $(pres_id8).fadeToggle("fast", function() {}); 
      $(pres_id9).fadeToggle("fast", function() {}); 
      $(pres_id10).fadeToggle("fast", function() {});  
      $(pres_id11).fadeToggle("fast", function() {});  
      $(pres_id12).fadeToggle("fast", function() {});  
      $(pres_id13).fadeToggle("fast", function() {});  
      $(pres_id14).fadeToggle("fast", function() {});   
      $(finalId).fadeToggle("fast", function() {});  

     } 
    </script> 

は、私はポストに合わせて、HTMLの一部を切り捨てなければならなかった

<div style="width:98%;padding:15px;margin-left:15px;margin-top:15px;margin-bottom:15px;position:relative;background-color:#FFF;border-radius:15px;" id="UUID"> 
<span class="glyphicon glyphicon-eye-open" style="color: #00db92;float:left;margin-right:5px;margin-top:5px;font-size: 35px;" aria-hidden="true"></span> 

<ul class="nav nav-tabs" role="tablist"> 
<li id="presentation1-UUID" role="presentation"> 
<a id="presentation2-UUID" href="#AutoScalingGroup-UUID" aria-controls="AutoScalingGroup-UUID" role="tab" data-toggle="tab">Auto Scaling Group</a></li> 
<li id="presentation3-UUID" role="presentation"> 
<a id="presentation4-UUID" href="#LaunchConfigTab-UUID" aria-controls="LaunchConfigTab-UUID" role="tab" data-toggle="tab">Launch Config</a></li> 
<li id="presentation5-UUID" role="presentation"> 
<a id="presentation6-UUID" href="#UserDataTab-UUID" aria-controls="UserDataTab-UUID" role="tab" data-toggle="tab">User Data</a></li> 
<li id="presentation7-UUID" role="presentation"> 
<a id="presentation8-UUID" href="#BlockDevicesTab-UUID" aria-controls="BlockDevicesTab-UUID" role="tab" data-toggle="tab">Block Devices</a></li> 
<li id="presentation9-UUID" role="presentation"> 
<a id="presentation10-UUID" href="#SecurityGroupsTab-UUID" aria-controls="SecurityGroupsTab-UUID" role="tab" data-toggle="tab">FStack Connections</a></li> 
<li id="presentation11-UUID" role="presentation"> 
<a id="presentation12-UUID" href="#SoftwareTab-UUID" aria-controls="SoftwareTab-UUID" role="tab" data-toggle="tab">Software</a> 
</li> 
<li id="presentation13-UUID" role="presentation"> 
<a id="presentation14-UUID" href="#Administration-UUID" aria-controls="Administration-UUID" role="tab" data-toggle="tab">Administration</a> 
</li> 
<li id="hide-UUID" role="presentation"> 
<a href="#" id="link-UUID" onclick="disable_tab(this);" data-toggle="tooltip" data-placement="top" title="Click this to toggle the stack options.">STACKNAME</a></li> 
<li id="presentation11-UUID" role="presentation"><a id="generate-button" class="btn btn-danger" onclick="delete_stack('UUID')" style="float:right";>Delete</a></li> 
</ul> 

</center> 

<div class="tab-content" style="" id="contentPane-UUID"> 
    <div role="tabpanel" class="tab-pane fade" id="AutoScalingGroup-UUID"> 
     <div style="padding:15px;width:250px;"> 
      <form id="AutoScalingGroup-UUID"> 
       <label for="AutoScalingGroup-UUID">AutoScalingGroup</label> 
       <div class="form-group"><label for="name">name</label> 
       <input type="name" class="form-control" id="name-UUID" placeholder="ExampleASGConfig" data-toggle="tooltip" data-placement="top" title="name (str) &#x2013; Name of the auto scaling group to create."> 
       </div> 
       <div class="form-group"> 
       <label for="availability_zones-UUID">availability_zones</label> 
       <select class="form-control" id="availability_zones-UUID" placeholder="us-west-2" data-toggle="tooltip" data-placement="top" title="availability_zones (list) &#x2013; List of availability zones (required)."> 
       <option value="us-east-1">us-east-1:US East (N. Virginia)</option> 
       <option value="us-east-2">us-east-2:US East (Ohio)</option> 
       <option value="us-west-1">us-west-1:US West (N. California)</option> 
       <option value="us-west-2">us-west-2:US West (Oregon)</option> 
       <option value="ca-central-1">ca-central-1:Canada (Central)</option> 
       <option value="eu-west-1">eu-west-1:EU (Ireland)</option> 
       <option value="eu-central-1">eu-central-1:EU (Frankfurt)</option> 
       <option value="eu-west-2">eu-west-2:EU (London)</option> 
       <option value="ap-northeast-1">ap-northeast-1:Asia Pacific (Tokyo)</option> 
       <option value="ap-northeast-2">ap-northeast-2:Asia Pacific (Seoul)</option> 
       <option value="ap-southeast-1">ap-southeast-1:Asia Pacific (Singapore)</option> 
       <option value="ap-southeast-2">ap-southeast-2:Asia Pacific (Sydney)</option> 
       <option value="ap-south-1">ap-south-1:Asia Pacific (Mumbai)</option> 
       <option value="sa-east-1">sa-east-1:South America (São Paulo)</option> 
       </select> 
       </div> 

       <div class="form-group"> 
       <label for="default_cooldown-UUID">default_cooldown</label> 
       <input type="default_cooldown" class="form-control" id="default_cooldown-UUID" placeholder="300" data-toggle="tooltip" data-placement="top" title="default_cooldown (int) &#x2013; Number of seconds after a Scaling Activity completes before any further scaling activities can start."></div> 

       <div class="form-group"> 
       <label for="desired_capacity-UUID">desired_capacity</label> 
       <input type="desired_capacity" class="form-control" id="desired_capacity-UUID" placeholder="1" data-toggle="tooltip" data-placement="top" title="desired_capacity (int) &#x2013; The desired capacity for the group."></div> 

       <div class="form-group"> 
       <label for="health_check_period-UUID">health_check_period</label> 
       <input type="health_check_period" class="form-control" id="health_check_period-UUID" placeholder="300" data-toggle="tooltip" data-placement="top" title="health_check_period str &#x2013; Length of time in seconds after a new EC2 instance comes into service that Auto Scaling starts checking its health."></div> 

       <div class="form-group"> 
       <label for="health_check_type-UUID">health_check_type</label> 
       <input type="health_check_type" class="form-control" id="health_check_type-UUID" placeholder="EC2" data-toggle="tooltip" data-placement="top" title="health_check_type str &#x2013; The service you want the health status from, Amazon EC2 or Elastic Load Balancer."></div> 

       <div class="form-group"> 
       <label for="launch_config-UUID">launch_config</label> 
       <input type="launch_config" class="form-control" id="launch_config-UUID" placeholder="launch_config_name" data-toggle="tooltip" data-placement="top" title="launch_config str or LaunchConfiguration &#x2013; Name of launch configuration required."></div> 

       <div class="form-group"> 
       <label for="load_balancers-UUID">load_balancers</label> 
       <input type="load_balancers" class="form-control" id="load_balancers-UUID" placeholder="" data-toggle="tooltip" data-placement="top" title="load_balancers list &#x2013; List of load balancers."></div> 

       <div class="form-group"> 
       <label for="max_size-UUID">max_size</label> 
       <input type="max_size" class="form-control" id="max_size-UUID" placeholder="1" data-toggle="tooltip" data-placement="top" title="max_size (int) &#x2013; Maximum size of group required."></div> 

       <div class="form-group"> 
       <label for="min_size-UUID">min_size</label> 
       <input type="min_size" class="form-control" id="min_size-UUID" placeholder="1" data-toggle="tooltip" data-placement="top" title="min_size (int) &#x2013; Minimum size of group required."></div> 

       <div class="form-group"> 
       <label for="placement_group-UUID">placement_group</label> 
       <input type="placement_group" class="form-control" id="placement_group-UUID" placeholder="t1.micro" data-toggle="" data-placement="top" title="placement_group str &#x2013; Physical location of your cluster placement group created in Amazon EC2."></div> 

       <div class="form-group"> 
       <label for="vpc_zone_identifier-UUID">vpc_zone_identifier</label> 
       <input type="vpc_zone_identifier" class="form-control" id="vpc_zone_identifier-UUID" placeholder="sub-00000,sub-11111" data-toggle="tooltip" data-placement="top" title="vpc_zone_identifier str or list &#x2013; A comma-separated string or python list of the subnet identifiers of the Virtual Private Cloud."></div> 

をロードされたダイナミックHTMLの例です。しかし、あなたはその考えを得る。

Answer 1

あなたコレクト機能を簡略化することができると、あなたは、たとえば、いずれかserializeArrayでJSONなど、すべてのデータを投稿したり、シリアライズすることができます

var alldata = {}; 

$("form").each(function(i, form){ 
    var current_data = $(form).serializeArray(); 
    alldata[$(form).prop("id")] = current_data; 
}); 
alert(JSON.stringify(alldata)); 

$.ajax({ 
    //your parameters here: url, etc. 
    url: 'save_stacks', 
    type: 'post', 
    dataType: 'json', 
    data: alldata, 
    success: function(response) { 
    //handling code 
    } 
}); 

あなたはおそらく、あなたの処理コードを適応させる必要があります

https://jsfiddle.net/1pLn4hw1/

バックエンドで