表单操作将我转到另一个显示 JSON (JavaScript) 的页面

Question

我有一个简单的（主要是工作）提交表单：

<form action="http://127.0.0.1:3000/books" method="POST" class="addBook">
    <input type="text" placeholder="Title" name="title" required>
    <input type="text" placeholder="ISBN" name="isbn" required>
    <button id="submitBook" type="submit" onclick="addingBooks()">Submit</button> 
</form>

我的表单正确地将输入值添加到我的数据库中，然后当我返回并刷新页面时它会出现在 DOM 中。

我在 JavaScript 代码中为 'addingBooks()' 函数应用了 preventDefault() 函数来阻止它提交两次，但我仍然无法阻止它转发到操作页面提交后仅显示提交数据的JSON。

如果您需要更多，请告诉我。

Answer 1

要阻止事件的默认操作，您需要一个事件对象来调用 preventDefault。有些浏览器确实有一个全局 event 对象，但这可能不可靠。
最简单的选择是从 onlick 事件中 return false，而不是您在其中调用的函数

<button id="submitBook" type="submit" onclick="addingBooks();return false;">Submit</button>

另一个简单且更好的解决方案是使按钮成为常规按钮而不是提交按钮，并从 addingBooks.

中删除 preventDefault

<button id="submitBook" type="button" onclick="addingBooks()">Submit</button>

另一个甚至更好的解决方案是根本不使用 onclick 属性，使用 addEventListener 函数

document.getElementById('submitBook').addEventListener("click", function(e){
  e.preventDefault();
  //other stuff
});

表单操作将我转到另一个显示 JSON (JavaScript) 的页面

Form action forwards me to another page showing JSON (JavaScript)

forms

post

xmlhttprequest

submit

preventdefault