JS：将JSON文件的内容写入textarea并且输入字段失败而没有错误

Question

我正在尝试阅读用户定义的JSON文件的内容。理想情况下，JSON对象包含id和request。如果是这种情况，则应将这些参数分别打印到输入字段和文本区域中。

我设法在控制台上打印它们;但是，HTML字段的内容不会更改。此外，我在控制台上看不到任何错误消息。

这是我的代码：

readJSONAfterRendering: function() {
    var reader = new FileReader();

    reader.onload = function() {
      var data = JSON.parse(reader.result);

      if (typeof data.id != 'undefined') {
        console.log(data.id);
        $('#queryIdInput').attr('value', data.id);
      } else {
        alert("Input does not contain ID!");
      }

      if (typeof data.request != 'undefined') {
        console.log(data.request);
        App.queryString = JSON.stringify(data.request);
        $('#queryStringInput').html(JSON.stringify(data.request));
      } else {
        alert("Input does not contain request!");
      }
    }

    var fileInput = document.getElementById("queryFile");
    reader.readAsText(fileInput.files[0]);
  }

相关的HTML：

    <div id="content">
      <form>
        <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
          <label for="queryIdInput">Query ID</label>
          <input class="form-control" id="queryIdInput">
        </div>

        <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
          <label for="queryStringInput">Query string</label>
          <textarea class="form-control" rows="5" id="queryStringInput"></textarea>
        </div>

        <div class="form-group col-xs-12 col-sm-12 col-md-6">
          <label for="queryFile">Query input</label>
          <input type="file" id="queryFile">
        </div>
      </form>
    </div>

上面提到的函数绑定到带有queryFile ID的输入字段的change事件：

$('#queryFile').bind('change', function() {
    App.readJSONAfterRendering();
});