Question

我有一个表单，并且其“提交”按钮具有附加的功能。

    <form class="form">
        <button class="btn" type="submit" onclick="submitItem()">Save</button>
    </form>

我的submitItem()函数如下所示：

function submitItem() {
    const url = 'http://localhost:3000/items';

    const data = {
      // input values here
    };

    const json = JSON.stringify(data);

    const xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

    xhr.send(json);

    window.location.replace('/index.html');
}

发布请求有效-添加了新项目，但window.location.replace('/index.html')不起作用，使我进入了表单页面，并在URL参数中提交了数据。

Answer 1

由于您的button元素位于form标记内，因此每当单击该按钮时，由于按钮的类型为“ submit”，该表单都会触发一个Submit事件。因此，页面刷新。这将覆盖您的window.location.replace（“ / index.html”），因此没有任何反应。

一种解决方案是，删除随附的表单标签。

或包含 onsubmit =“ submitItem（）;将false” 返回到 form标签，如下所示。

别忘了删除按钮上的 onclick 。

 <form class="form" onsubmit="submitItem(); return false">
        <button class="btn" type="submit">Save</button>
    </form>

提交表格后无法重定向到首页

1 个答案: