17370845950

本文旨在解决html表单在通过javascript处理数据时意外刷新页面的常见问题。我们将探讨html `` 元素的默认行为，解释为何表单会触发页面刷新，并提供两种有效的解决方案：明确设置按钮类型为 `button` 或利用 `event.preventdefault()` 阻止表单的默认提交行为。此外，还将介绍如何正确使用 `sessionstorage` 存储和检索复杂的javascript对象数组。

理解HTML表单的默认行为

在Web开发中，HTML

阻止默认提交行为的两种策略

为了通过JavaScript完全控制表单数据的处理流程，我们需要阻止其默认的提交行为。以下是两种常用且有效的策略：

1. 明确设置按钮类型为 type="button"

这是最直接的解决方案，特别适用于那些不希望触发表单提交，而是仅通过JavaScript click 事件处理逻辑的按钮。

示例：

Add


Add

将按钮的 type 属性设置为 button 后，点击它将不再触发表单的默认提交行为。JavaScript代码可以通过监听该按钮的 click 事件来执行自定义逻辑。

2. 使用 event.preventDefault() 阻止表单提交

这种方法更为通用和强大，它通过监听表单的 submit 事件来阻止其默认行为。即使表单中有 type="submit" 的按钮，或者用户按下回车键提交表单，event.preventDefault() 也能有效阻止页面刷新。

示例：

首先，确保你的HTML表单结构是正确的，并且按钮可以是 type="submit"（或者不指定 type ）。

    请填写书名:
    


    请填写作者:
    


    请填写类型:
    


    请填写评论:
    

    
    Add

然后，在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 元素的默认行为，并采用 type="button" 或 event.preventDefault() 这两种策略，你可以完全控制表单的提交过程。同时，正确地使用 JSON.stringify() 和 JSON.parse() 来处理 sessionStorage 中的复杂数据，是构建健壮Web应用的必备技能。掌握这些技巧，将使你的Web表单交互更加流畅和高效。