使用特定 .json 文件的 HTML 表单将 .json 文件加载到 HTML 模板

Question

我有很多不同的 .json 文件，我想将它们的名称输入到 HTML 页面（本地）表单中，以便将此信息加载到表中。

我的 HTML 表单如下所示：

  <form>
    File: <input type="text" Id="file_name">
    <input type="submit" value="Load file" onclick="filltable()">
  </form>

我的表头是这样的：

<div class="container">
  <table class="table table-bordered table-striped table-hover">
    <thead>
    <tr>
      <th>Sample</th>
      <th>Variant</th>
      <th>Depth</th>
    </tr>
    </thead>
  </table>
</div>

我的 javascript 脚本是这样的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>

  function filltable() {
    var name = document.getElementById("file_name").value +".json";
  };

  $.getJSON(name,function(stuff){
    var items = [];
    $.each(stuff, function(key, val){
      items.push("<tr>");
      items.push("<td id=''"+key+"''>"+val.sample+"</td>");
      items.push("<td id=''"+key+"''>"+val.variant+"</td>");
      items.push("<td id=''"+key+"''>"+val.depth+"</td>");
    });
    $("<tbody/>", {html: items.join("")}).appendTo("table");
  });


</script>

我还尝试将 .getJSON 代码嵌入到我的 filltable() 函数中，以便在单击提交按钮时调用它 - 但这不起作用。如果我更换：

"$.getJSON(name,function(stuff){"

与：

".getJSON("file1.json",function(stuff{"

然后它加载正常 - 我只想能够使用输入加载不同的文件。

Answer 1

试试这个：

$('form').on('submit', function(){
  var name = document.getElementById("file_name").value +".json";
  $.getJSON(name,function(stuff){
    var items = [];
    $.each(stuff, function(key, val){
      items.push("<tr>");
      items.push("<td id=''"+key+"''>"+val.sample+"</td>");
      items.push("<td id=''"+key+"''>"+val.variant+"</td>");
      items.push("<td id=''"+key+"''>"+val.depth+"</td>");
    });
    $("<tbody/>", {html: items.join("")}).appendTo("table");
  });
  return false;

});