本文探讨了html表单在完整提交时意外刷新的常见问题，并解释了其根本原因在于html `

引言：HTML表单提交与意外刷新

在Web开发中，我们经常需要通过HTML表单收集用户输入。当用户填写完表单并点击提交按钮后，有时会遇到页面意外刷新的情况。这种刷新行为可能导致JavaScript中处理表单数据的逻辑（例如创建对象、更新数组、使用 sessionStorage 存储数据）无法按预期执行，或者存储的数据在刷新后丢失。尤其是在表单部分填写时行为正常，而全部填写后却发生刷新时，这往往是由于对HTML

理解HTML

HTML中的

当一个 type="submit" 的按钮被点击时，它会触发其所属表单的提交事件。默认情况下，表单提交会导致浏览器将表单数据发送到服务器（或当前页面），并随后刷新页面。这就是为什么当所有必填字段都填写完整，满足了表单的提交条件时，页面会发生刷新的原因。而当部分字段未填写时，如果这些字段被标记为 required，浏览器可能会阻止表单提交并显示验证提示，从而避免了页面刷新。

原始HTML代码中的按钮定义如下：

由于没有明确指定 type 属性，这个按钮在

内部会被浏览器默认为 type="submit"。

解决方案：明确指定按钮类型为 type="button"

要阻止按钮触发表单的默认提交行为并导致页面刷新，最直接和推荐的方法是显式地将按钮的 type 属性设置为 button。

type="button" 将按钮定义为一个普通的、不具备任何默认表单行为的按钮。这意味着点击它只会触发通过JavaScript addEventListener 绑定的事件处理函数，而不会导致页面刷新。

修正后的HTML代码片段：

Book Catalogue

Your favourite book catalogue

Please enter the title of your book:
Please enter the author of the book
Please enter the genre of the book:
Please enter your review on the book:

通过将修改为，我们确保了点击此按钮时，只有JavaScript中 addBtn.addEventListener("click", ...) 定义的逻辑会被执行，而不会触发任何表单提交或页面刷新。

JavaScript事件处理与数据存储的最佳实践

在按钮类型修正后，JavaScript的事件监听器将能够稳定地执行其内部逻辑。然而，在处理数据存储（特别是使用 sessionStorage 或 localStorage 存储复杂数据类型如数组和对象）时，还需要注意数据序列化的问题。

原始JavaScript代码：

let myArray = [];
class Books {
    constructor(Title, Author, Genre, Review) {
        this.Title = Title
        this.Author = Author
        this.Genre = Genre
        this.Review = Review
    }

    // ... getter methods ...
}

const addBtn = document.getElementById("addBttn")
addBtn.addEventListener("click", (event) => {
    // 阻止默认行为的另一种方式：event.preventDefault()
    // 如果按钮是 type="submit"，且你想用JS处理提交，可以在这里调用
    // 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)

    // 修正：存储数组需要JSON序列化
    sessionStorage.setItem("array", myArray); // 原始问题：直接存储数组会变成 "[object Object],[object Object]"
})

console.log(sessionStorage.getItem("array"));

改进后的JavaScript代码：

为了确保 sessionStorage 正确存储和检索数组或对象，我们需要使用 JSON.stringify() 将其转换为JSON字符串进行存储，并在读取时使用 JSON.parse() 将其反序列化回原始数据结构。此外，为了在页面加载时恢复数据，需要检查 sessionStorage 中是否存在数据。

let myArray = [];

// 页面加载时尝试从sessionStorage中恢复数据
if (sessionStorage.getItem("array")) {
    try {
        // 解析存储的JSON字符串为数组
        myArray = JSON.parse(sessionStorage.getItem("array"));
        console.log("Loaded array from sessionStorage:", myArray);
    } catch (e) {
        console.error("Error parsing sessionStorage array:", e);
        // 如果解析失败，清空或重置myArray
        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 addBtn = document.getElementById("addBttn")
addBtn.addEventListener("click", (event) => {
    // 如果按钮是 type="submit"，在这里调用 event.preventDefault() 可以阻止表单默认提交
    // 但由于我们已经设置了 type="button"，此处通常不需要
    // 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;

    // 可以在这里添加简单的表单验证
    if (!userTitle || !userAuthor || !userGenre || !userReview) {
        alert("请填写所有必填字段！");
        return; // 阻止后续操作
    }

    const newObj = new Books(userTitle, userAuthor, userGenre, userReview);
    myArray.push(newObj);
    console.log("New book added:", newObj);

    // 将更新后的数组序列化为JSON字符串并存储
    sessionStorage.setItem("array", JSON.stringify(myArray));

    // 清空表单字段以便用户输入下一本书
    document.getElementById("title").value = '';
    document.getElementById("author").value = '';
    document.getElementById("genre").value = '';
    document.getElementById("reviews").value = '';

    // 可以在这里添加逻辑来显示更新后的书籍列表
    displayBooks(); // 假设存在一个 displayBooks 函数来渲染列表
});

// 示例：一个简单的显示书籍列表的函数
function displayBooks() {
    // 假设你有元素来显示书籍，这里只是一个占位符
    const outputElement = document.getElementById("bookTitle"); // 假设用于显示所有书籍
    outputElement.innerHTML = ''; // 清空之前的内容

    if (myArray.length === 0) {
        outputElement.textContent = "目前没有书籍。";
        return;
    }

    myArray.forEach(book => {
        const bookInfo = document.createElement('p');
        bookInfo.textContent = `标题: ${book.getTitle()}, 作者: ${book.getAuthor()}, 类型: ${book.getGenre()}, 评论: ${book.getReview()}`;
        outputElement.appendChild(bookInfo);
    });
}

// 首次加载时显示已有的书籍
displayBooks();

注意事项与最佳实践

阻止默认行为的两种主要方式：
- type="button"：这是最直接的方式，它将按钮定义为不触发表单提交的普通按钮。适用于完全由JavaScript控制行为的按钮。
- event.preventDefault()：在事件处理函数内部调用 event.preventDefault() 可以阻止事件的默认行为。例如，如果你有一个 type="submit" 的按钮，但希望在JavaScript中进行异步提交或自定义验证，可以在表单的 submit 事件监听器或按钮的 click 事件监听器中调用 event.preventDefault()。
```
// 示例：在表单提交事件中阻止默认行为
const myForm = document.querySelector('form');
myForm.addEventListener('submit', (event) => {
    event.preventDefault(); // 阻止表单默认提交和页面刷新
    // 在这里执行你的自定义提交逻辑
    console.log("Form submitted via JS, no page refresh.");
});
```
数据序列化与反序列化：
- 当使用 sessionStorage 或 localStorage 存储非字符串数据（如数组、对象）时，务必使用 JSON.stringify() 将其转换为JSON字符串。
- 从存储中读取时，使用 JSON.parse() 将JSON字符串反序列化回原始数据结构。
- 进行 JSON.parse() 时，最好使用 try-catch 块来处理潜在的解析错误，以防存储的数据损坏或格式不正确。
表单验证：
- HTML5 的 required 属性提供了基本的客户端验证。当按钮是 type="submit" 时，浏览器会自动检查这些字段。
- 如果使用 type="button" 或通过 event.preventDefault() 阻止了默认提交，则需要手动在JavaScript中实现或触发验证逻辑，以确保所有必要的数据都被提供。
用户体验：
- 在成功添加数据后，清空表单字段是一个良好的用户体验实践，方便用户输入下一条数据。
- 及时更新UI以反映数据变化，例如显示新添加的书籍列表。