Javascript Django HTML，如何通过AJAX和加载表单传递单选选项选择

如何将从单选按钮中选择的值传递到ajax url。 我有单选按钮选择下载/上传。 代码：

  <form id="listofiles" action="" class="post-form" role=form method="post">{% csrf_token %}
  Select: Download:
  <input class="form-check-input" name="optionsRadios" type="radio" value="download">
  or Upload:
  <input class="form-check-input" name="optionsRadios" type="radio" value="upload">
  BUTTON: 
  <input type="submit" value="GO" id="download" name="download" class="btn btn-info" />
  <input type="submit" value="GO" id="upload"  name="upload" class="btn btn-warning" />

HTML:listofiles.HTML 问题，在此页面中，我有两个具有不同ID的表单。如何根据所选选项加载表单

代码：

{%csrf_令牌%}
. . . 
下载
{%csrf_令牌%}
. . . 
上传

我假设我们停留在同一页面上：然后我们可以更新您的代码：

重复使用相同的选择器：

$("input[name='optionsRadios']:radio:checked").val() == "upload");

使用选中的伪选择器查看选择了哪个值来切换正确的div

执行此代码将导致多个元素具有相同的id名称。最好使用类名或唯一ID

<div id="fetchdata" align="center">
  <!-- LOADING DATA FROM THE AJAX listofiles.html -->
</div>

$("#listofiles").submit(function() { // catch the form's submit event
$.ajax({ // create an AJAX call...
    url: 'listofiles.html',
    type: $(this).attr('GET'),
    data: $(this).serialize(), // get the form data
    success: function(data) { // on success..
        $("#fetchdata").html(data); // update the DIV
        console.log(data);
    }
});
return false;
});

   <div id="download" style="display:none"><div align="center" class="container">
   <form id="download" action="download" role=form method="POST" class="post-form">{% csrf_token %}
   . . . 
   <div class="col" align="left">
     <button type="submit" name="download" class="btn btn-primary btn-lg">DOWNLOAD</button>
   </div></div></form></div></div>

   <div id="upload" style="display:none"><div align="center" class="container">
   <form id="upload" action="upload" role=form method="POST" class="post-form">{% csrf_token %}
   . . . 
   <div class="col" align="left">
     <button type="submit" name="upload" class="btn btn-primary btn-lg">UPLOAD</button>
   </div></div></form></div></div>

$("input[name='optionsRadios']:radio:checked").val() == "upload");

$("#listofiles").submit(function() { // catch the form's submit event
$.ajax({ // create an AJAX call...
    url: 'listofiles.html',
    type: $(this).attr('GET'),
    data: $(this).serialize(), // get the form data
    success: function(data) { // on success..
        $("#fetchdata").html(data); // update the DIV
        $("div[id='upload']").toggle($("input[name='optionsRadios']:radio:checked").val() == "upload");
        $("div[id='download']").toggle($("input[name='optionsRadios']:radio:checked").val() == "download");  
//there is already another element with id download | you need to change that, so circumventing like this for now.
        }
    }
});
return false;
});