当searchParams不存在于URL中时隐藏div

Question

我工作于网络基础应用，我工作使用python，html和烧瓶作为框架。我有3个程序文件，1个是processing.py，2个是server.py，3个是index.html。当第一次运行时，它将进入index.html，程序需要file文件(包含4个CSV文件)作为输入。所有操作都很好，除了单选按钮仍然显示输入尚未输入(第一次运行)。我使用的是3个流(初始运行->输入选择->处理结果)，.i在文件尚未输入时(首先运行)和提交按钮按下(在输入选择流上)之后，希望隐藏单选按钮div，因为值还没有出现，我想隐藏div，但它不像我想要的那样工作。这是我的代码

<div id="form_comparison" class=pf-5">
  <form id="comparison_list" action="http://localhost:5000/process" method="POST">
    <table>
      <tr>
        <th><input class="comparison" type="radio" name="comparison" id="first" value="data1"></th>
        <th><label for="first" id="first_choice"></label></br></th>
      </tr>
      <tr>
        <th><input class="comparison" type="radio" name="comparison" id="second" value="data2"></th>
        <th><label for="second" id="second_choice"></label></br></th>
      </tr>
      <tr>
        <th><input class="comparison" type="radio" name="comparison" id="third" value="data3"></th>
        <th><label for="third" id="third_choice"></label></br></th>
      </tr>
    </table>
    <div>
      <button for submit/>
    </div>
  </form>
</div>

<script>
var url_string = windows.location.href;
var url= new URL(url_string);
var list_data = url.searchParams.getAll("list_data");

document.getElementById("first_choice").innerHTML = list_data[0]
document.getElementById("second_choice").innerHTML = list_data[1]
document.getElementById("third_choice").innerHTML = list_data[2]
document.getElementById("first").value = list_data[0]
document.getElementById("second").value = list_data[1]
document.getElementById("third").value = list_data[2]
</script>

我试过这样的方法：

<script>
        $(function(){
            if('{{list_data}}'==0){
                $('#form_comparison').hide();
            }
        });
    </script>

即使在发送值之后，它也会隐藏div，并且我尝试了这个$('div.form_comparison:empty').hide();，它仍然不能工作。我怎样才能使它像我想的那样正常工作呢？

这是浏览器上的URL和URL图像

1. 首次运行

http://127.0.0.1:5000/

输入时的

1. (输入选择流)

http://localhost:5000/uploader?filename=4data1dummy.zip&list_data=rekap2015.csv&list_data=edit-rekap-DBD-2013.csv&list_data=edit-rekap-DBD-2014.csv&list_data=dummy1.csv

1. 过程结果

http://localhost:5000/proses

Answer 1

因为getAll()方法返回数据的array -您可以通过检查params的长度来检查它的长度，如果list_data.length是== 0，那么隐藏表单，否则else什么都不做。

此外，我还使用textContent来显示标签文本，因为innerHTML是而不是，可以简单地应用text。

Live：(中的searchParams)

​

var url_string = 'http://localhost:5000/uploader?filename=4data1dummy.zip&list_data=rekap2015.csv&list_data=edit-rekap-DBD-2013.csv&list_data=edit-rekap-DBD-2014.csv&list_data=dummy1.csv'
//var url_string = window.location.href;
var url = new URL(url_string);
var list_data = url.searchParams.getAll("list_data");
document.getElementById("first_choice").textContent = list_data[0]
document.getElementById("second_choice").textContent = list_data[1]
document.getElementById("third_choice").textContent = list_data[2]
document.getElementById("first").value = list_data[0]
document.getElementById("second").value = list_data[1]
document.getElementById("third").value = list_data[2]

$(function() {
  if (list_data.length == 0) {
    $('#form_comparison').hide();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form_comparison" class="pf-5">
  <form id="comparison_list" action="http://localhost:5000/process" method="POST">
    <table>
      <tr>
        <th><input class="comparison" type="radio" name="comparison" id="first" value="data1"></th>
        <th><label for="first" id="first_choice"></label><br></th>
      </tr>
      <tr>
        <th><input class="comparison" type="radio" name="comparison" id="second" value="data2"></th>
        <th><label for="second" id="second_choice"></label><br></th>
      </tr>
      <tr>
        <th><input class="comparison" type="radio" name="comparison" id="third" value="data3"></th>
        <th><label for="third" id="third_choice"></label><br></th>
      </tr>
    </table>
    <div>
      <button>
        Submit
      </button>
    </div>
  </form>
</div>

​

如果您在window.location.href中不是参数，当您加载页面时，表单将是hidden。

Live： (NO searchParams 在URL中找到)

​

var url_string = 'http://localhost:5000/proses' //no params
//var url_string = window.location.href;
var url = new URL(url_string);
var list_data = url.searchParams.getAll("list_data");
document.getElementById("first_choice").textContent = list_data[0]
document.getElementById("second_choice").textContent = list_data[1]
document.getElementById("third_choice").textContent = list_data[2]
document.getElementById("first").value = list_data[0]
document.getElementById("second").value = list_data[1]
document.getElementById("third").value = list_data[2]

$(function() {
  if (list_data.length == 0) {
    $('#form_comparison').hide();
    console.log('No Search Params Found - Form is hidden')
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form_comparison" class="pf-5">
  <form id="comparison_list" action="http://localhost:5000/process" method="POST">
    <table>
      <tr>
        <th><input class="comparison" type="radio" name="comparison" id="first" value="data1"></th>
        <th><label for="first" id="first_choice"></label><br></th>
      </tr>
      <tr>
        <th><input class="comparison" type="radio" name="comparison" id="second" value="data2"></th>
        <th><label for="second" id="second_choice"></label><br></th>
      </tr>
      <tr>
        <th><input class="comparison" type="radio" name="comparison" id="third" value="data3"></th>
        <th><label for="third" id="third_choice"></label><br></th>
      </tr>
    </table>
    <div>
      <button>
        Submit
      </button>
    </div>
  </form>
</div>

​