javascript - 如何将用户输入从引导表单检索到 JSON 发布到 API？

Question

 <form>
        <div class="form-group">
            <label for="text">Name:</label>
            <input type="text" class="form-control" id="name" placeholder="Enter name" name="name">
        </div>
        <div class="form-group">
            <label for="text">Age:</label>
            <input type="text" class="form-control" id="age" placeholder="Age" name="age">
        </div>
        <div class="form-group">
            <label for="text">City:</label>
            <input type="text" class="form-control" id="city" placeholder="Enter city" name="city">
        </div>
        <button onclick = "MyFunction()" id = "submitButton" type="submit" class="btn btn-default">Submit</button>
        <p id = "demo">

        </p>
        <script>

            function MyFunction() {
                var name = document.getElementById("name")
                var age = document.getElementById("age")
                var city = document.getElementById("city")
                document.getElementById("demo").innerHTML = name + " " + age + " " + city;
            }
        </script>
    </form>
</div>

这是一个引导表单，他们填写他们的姓名、地址、年龄，当他们按下提交时，它会向在 localHost:5200 上运行的烧瓶服务器发出 JSON 发布请求

这是最终目标，现在我试图在屏幕上显示用户在这些表单中输入的内容以显示在屏幕上，所以我知道我抓住了正确的东西，因此 myFunction 方法，但它不起作用并返回一个对象并刷新页面...

标签： javascripttwitter-bootstrap

Answer 1

<form>
    <div class="form-group">
      <label for="text">Name:</label>
      <input type="text" class="form-control" id="name" placeholder="Enter name" name="name">
    </div>
    <div class="form-group">
      <label for="text">Age:</label>
      <input type="text" class="form-control" id="age" placeholder="Age" name="age">
    </div>
    <div class="form-group">
      <label for="text">City:</label>
      <input type="text" class="form-control" id="city" placeholder="Enter city" name="city">
    </div>
    <button onclick="MyFunction(event)" id="submitButton" type="submit" class="btn btn-default">Submit</button>
    <p id="demo">

    </p>
  </form>
  <script>
    function MyFunction(e) {
      e.preventDefault();
      var name = document.getElementById("name").value
      var age = document.getElementById("age").value
      var city = document.getElementById("city").value
      document.getElementById("demo").innerHTML = name + " " + age + " " + city;
      fetch('http://localhost:5100', {
        method: 'POST',
        body: JSON.stringify({ name, age, city })
      }).then(res => res.json())
    }
  </script>