Question

我在JSON文件中有一个对象数组。我想输入一个ID，并依次按相应对象的N个属性之一填充N个元素。

（example.json）

{
  "objects": [
    {
      "key1": "obj1 val1",
      "key2": "obj1 val2"
    },
    {
      "key1": "obj2 val1",
      "key2": "obj2 val2"
    }
  ]
}

我首先设置ID，然后填充动态元素：

（populate.js）

$(document).ready(function () {
  var id = 1;
  $.getJSON('example.json', function(example) {
    let data = Object.values(example.objects[id]);
    let elements = document.querySelectorAll('.dynamic-elements');
    elements.forEach((e, i) => {
      e.innerHTML = data[i];
    });
  });
});

（HTML）

<!DOCTYPE html>
<html>
<script src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js'></script>

<body>
  <div class='dynamic-element'></div>
  <div class='dynamic-element'></div>
  <script src='populate.js'></script>
</body>

这将在第一个元素上写“ obj2 val1”，在第二个元素上写“ obj2 val2”，这是我想要的。当我尝试在表单提交上做同样的事情时，问题就来了。我将表单添加到.html：

<form>
  <input type='text' name='ID'>
  <input type='submit' value='Submit'>
</form>

并将populate.js的第一行更改为：

$('form').submit(function () {

我希望每当我单击“提交”时，页面就会被对象[1]填充，但是什么也没有发生。如果我将整个脚本替换为简单的console.log（“ debug”），则也不会打印任何内容。有趣的是，如果我也添加alert（“ debug”），那么两者控制台消息和警报将起作用。另外，如果我将脚本调用放在表单下方，它似乎只能工作。

我是html / javascript的新手。有人可以解释为什么会发生这种情况，还可以帮助我获得所需的行为吗？

编辑：更改后的populate.js的完整代码：

//$(document).ready(function () {
$('form').submit(function () {
    // This section runs, but not without the alert
    console.log("debug");
    alert("debug");

    // This section no longer seems to run
    var id = 1;
    $.getJSON('member-db.json', function(db) {
        let data = Object.values(db.members[id]);
        let elements = document.querySelectorAll('.db-info');
        elements.forEach((e, i) => {
                e.innerHTML = data[i+1];
        });
    });
});

Answer 1

由于您提交表单时，此页面使用POST方法重定向。如果您要console.log（“ debug”），则必须添加e.preventDefault（）;

$('form').submit(function (e) {
     e.preventDefault();
     console.log("debug");
     ...
});

在HTML表单提交中读取JSON文件

1 个答案: