表单提交未传值导致API请求结果无法在HTML页面正常展示问题求助

你使用的是type="submit"的表单按钮，点击后会触发表单默认提交行为，浏览器会自动刷新页面，此时异步执行的fetch请求还未完成回调，页面就已经重置了，因此看不到渲染结果。手动在控制台调用函数时不会触发表单提交逻辑，因此功能正常。

可以任选以下任意一种方案解决：

• 方案1：修改按钮类型，取消默认提交行为
  把提交按钮的type属性从submit改为button：

<input type="button" value="Submit" name="submit" onclick="fetchPerson()" />

• 方案2：阻止表单默认提交事件
  给fetchPerson函数增加事件阻止逻辑，首先修改按钮绑定逻辑：

<input type="submit" value="Submit" name="submit" onclick="fetchPerson(event)" />

然后修改JS函数，第一行增加阻止默认行为的代码：

function fetchPerson(e) {
    e.preventDefault(); // 阻止表单默认提交刷新页面
    var input = document.getElementById('search').value;
    fetch(`notrevealingapi/api/name=${input}`)
    .then(res => res.json())
    .then(data => {
        console.log(data);
        const html = data.data
            .map(hit => {
                return `<p>Hits: ${hit.person}</p>`;
            })
            .join("");
        document.querySelector('#app').insertAdjacentHTML("afterbegin", html);
    })
    // 可选补充：捕获请求错误避免静默失败
    .catch(err => console.error('请求出错：', err))
}

• 方案3：绑定form的submit事件（更符合前端规范）
  移除按钮的onclick绑定，给form元素绑定提交事件：

<form onsubmit="fetchPerson(event)">
    <input type="text" id="search" placeholder="Enter person">
    <input type="submit" value="Submit" name="submit" />
</form>

JS代码同方案2的修改即可。

内容的提问来源于stack exchange，提问作者Flip