javascript - 单击 Django 中的单选按钮后如何在同一页面上显示数据

Question

我有两个 Div 部分，一个 Div 部分包含单选按钮列表，我想当我单击单选按钮时，在另一个 Div 部分上显示与单选按钮对应的数据。

<div class="card-body ">
  <form id="ShowAvailableDataFiles" method="post">
    {% csrf_token %}
    {% for post in posts %}
      <input type="radio" id="showavailabledataid" name="datafilesname" value='{{ post }}'
             onclick="ShowAvailableDataFiles()"> {{ post }} <br>
    {% endfor %}
  </form>
</div>

<div id='show-me'>
{% for data in datas %}
    {{data}}
{% endfor %}
</div>

<script>
  function ShowAvailableDataFiles() {
    $('#showavailabledataid').on('click', function () {
      var radioValue = $("input[name='showavailabledataname']:checked").val();
      console.log("You clicked radio button")
    });
    $.ajax({
      url: "/analytics/datafile_name/",
      type: "POST",
      data: {
        datafiles: $("input[name='showavailabledataname']:checked").val(),
        csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()

      },
      success: function (data) {
        console.log("=========")

      }
    });
  }
</script>

Answer 1

在你的 ajax 的成功函数中:

success: function (data) {
        html_code = "<input type='checkbox' id='filesid' name = 'filesname' value='"+data+"'>"+data+"<br>"
        $('#show-me').html(html_code);
}