本文旨在解决html表单在通过javascript处理数据时意外刷新页面的常见问题。我们将探讨html `
理解HTML表单的默认行为
在Web开发中，HTML
然后，在JavaScript中监听表单的 submit 事件并调用 event.preventDefault()：
// booksJS.js
let myArray = []; // 用于存储图书对象的数组
// 定义图书类
class Books {
constructor(Title, Author, Genre, Review) {
this.Title = Title;
this.Author = Author;
this.Genre = Genre;
this.Review = Review;
}
// 提供获取属性的方法
getTitle() { return this.Title; }
getAuthor() { return this.Author; }
getGenre() { return this.Genre; }
getReview() { return this.Review; }
}
// 获取表单元素
const bookForm = document.getElementById("bookForm");
// 页面加载时尝试从sessionStorage中恢复数据
function loadBooksFromSessionStorage() {
const storedArray = sessionStorage.getItem("bookCatalogue");
if (storedArray) {
// 解析JSON字符串为JavaScript数组
myArray = JSON.parse(storedArray);
console.log("已从sessionStorage加载数据:", myArray);
displayBooks(); // 加载后显示数据
} else {
myArray = [];
}
}
// 监听表单的 submit 事件
bookForm.addEventListener("submit", (event) => {
// 阻止表单的默认提交行为，防止页面刷新
event.preventDefault();
// 获取用户输入值
let userTitle = document.getElementById("title").value;
let userAuthor = document.getElementById("author").value;
let userGenre = document.getElementById("genre").value;
let userReview = document.getElementById("reviews").value;
// 创建新的图书对象
const newObj = new Books(userTitle, userAuthor, userGenre, userReview);
myArray.push(newObj);
console.log("新添加的图书对象:", newObj);
// 将更新后的数组存储到sessionStorage
// 注意：需要将JavaScript对象或数组转换为JSON字符串才能正确存储
sessionStorage.setItem("bookCatalogue", JSON.stringify(myArray));
// 清空表单字段
bookForm.reset();
// 更新页面显示
displayBooks();
});
// 示例：一个简单的函数来显示数组中的最新图书信息
function displayBooks() {
const bookTitleP = document.getElementById("bookTitle");
const bookAuthorP = document.getElementById("bookAuthor");
const bookGenreP = document.getElementById("bookGenre");
const bookReviewP = document.getElementById("bookReview");
if (myArray.length > 0) {
const lastBook = myArray[myArray.length - 1];
bookTitleP.textContent = `书名: ${lastBook.getTitle()}`;
bookAuthorP.textContent = `作者: ${lastBook.getAuthor()}`;
bookGenreP.textContent = `类型: ${lastBook.getGenre()}`;
bookReviewP.textContent = `评论: ${lastBook.getReview()}`;
} else {
bookTitleP.textContent = "暂无图书信息";
bookAuthorP.textContent = "";
bookGenreP.textContent = "";
bookReviewP.textContent = "";
}
}
// 页面加载完成后立即调用，以初始化数据和显示
document.addEventListener("DOMContentLoaded", loadBooksFromSessionStorage);注意事项：
- onsubmit="false" 的误区： 在HTML中直接使用 onsubmit="false" 是无效的。如果想在HTML中阻止默认提交，应该使用 onsubmit="return false;"。然而，更推荐的做法是在JavaScript中通过 event.preventDefault() 来处理，因为它提供了更灵活的控制。
-
sessionStorage 存储复杂数据： sessionStorage (和 localStorage) 只能存储字符串。当你尝试存储JavaScript对象或数组时，它们会被自动转换为字符串。例如，一个数组 [obj1, obj2] 可能会被转换为 "[object Object],[object Object]"，这并不是我们期望的JSON格式。
- 存储时： 始终使用 JSON.stringify() 将对象或数组转换为JSON字符串再存储。
- 读取时： 始终使用 JSON.parse() 将存储的JSON字符串转换回JavaScript对象或数组。
总结
当你在Web表单中使用JavaScript进行数据处理时，避免意外的页面刷新是实现无缝用户体验的关键。通过理解HTML
