HTML表单提交与JavaScript事件处理：避免意外页面刷新-js教程-PHP中文网

html表单提交与javascript事件处理：避免意外页面刷新

在HTML表单开发中，当<button>元素未明确指定type属性时，其默认行为可能导致意外的页面刷新。本文将深入探讨HTML按钮的默认类型及其对表单提交的影响，提供将按钮type设置为"button"以阻止默认提交行为的解决方案。同时，将结合JavaScript事件监听和sessionStorage的使用，指导开发者构建不刷新页面的交互式表单，并分享数据持久化的最佳实践。

理解HTML表单提交机制与按钮类型

在Web开发中，HTML表单是用户输入数据的主要途径。当用户点击表单内的提交按钮时，浏览器会默认尝试将表单数据发送到服务器，并通常导致页面刷新。对于需要通过JavaScript在客户端处理数据而不刷新页面的场景，理解并控制这一默认行为至关重要。

<button> 元素的 type 属性

HTML的<button>元素拥有一个type属性，它定义了按钮的行为。这个属性有三个主要值：

submit (默认值): 如果<button>元素位于<form>内部且未指定type属性，或者明确设置为type="submit"，点击它将触发表单的提交。这意味着浏览器会收集表单数据，并根据<form>的action和method属性将数据发送到服务器，随后页面通常会重新加载或导航到新的URL。
button: 当type="button"时，按钮没有默认行为。它仅作为一个可点击的元素存在，其行为完全由JavaScript事件监听器定义。这是实现客户端数据处理而不触发页面刷新的首选类型。
reset: 当type="reset"时，点击按钮会重置表单中所有输入字段的值到它们的初始状态。

为什么会出现意外刷新？

在提供的代码示例中，HTML表单包含一个<button id="addBttn">Add</button>。由于type属性未指定，浏览器会将其解释为type="submit"。当用户填写所有表单字段并点击此按钮时，即使JavaScript中绑定了click事件监听器，表单的默认提交行为也会被触发，导致页面刷新，从而覆盖了JavaScript中对数组的修改和sessionStorage的设置。

立即学习“Java免费学习笔记（深入）”；

奇怪的是，当只填写部分字段时没有刷新，这可能是因为浏览器在某些情况下，如果required字段未满足，会阻止默认提交并显示验证提示，但一旦所有required字段都满足，提交行为就会被触发。

解决方案：明确指定按钮类型

解决此问题的核心在于明确告知浏览器，该按钮不应触发表单提交。

修改HTML代码

将<button>元素的type属性设置为"button"：

<form>
    <!-- ... 其他表单元素 ... -->
    <label for="reviews">Please enter your review on the book:</label>
    <input type="text" name="reviews" id="reviews" required>

    <button type="button" id="addBttn">Add</button> <!-- 关键改动在这里 -->
</form>

登录后复制

通过此修改，点击“Add”按钮将不再触发表单的默认提交行为，页面也不会刷新。现在，按钮的行为将完全由其绑定的JavaScript事件监听器控制。

吉卜力风格图片在线生成

将图片转换为吉卜力艺术风格的作品

165

查看详情

完善JavaScript逻辑与数据持久化

在解决了页面刷新问题后，我们需要确保JavaScript逻辑能够正确地处理表单数据并进行持久化。

优化JavaScript事件处理

虽然将按钮类型设置为"button"可以阻止页面刷新，但在更复杂的表单场景中，如果仍然希望使用type="submit"的按钮（例如，为了利用浏览器内置的验证功能），则需要在表单的submit事件监听器中使用event.preventDefault()来阻止默认行为。对于当前场景，type="button"已经足够。

此外，原始代码中sessionStorage.setItem("array", myArray);的用法会将myArray直接转换为字符串，结果可能是"[object Object],[object Object]"，这并不是我们期望的JSON格式。为了正确存储和检索JavaScript对象数组，我们需要使用JSON.stringify()和JSON.parse()。

let myArray = []; // 初始化数组

// 在页面加载时尝试从sessionStorage加载数据
// 确保在添加新数据前，先恢复之前存储的数据
const storedArray = sessionStorage.getItem("booksArray"); // 建议使用更具体的键名
if (storedArray) {
    myArray = JSON.parse(storedArray);
    // 可以在这里调用一个函数来渲染已有的数据
    renderBooks();
}

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="button"已阻止提交，但这是一个好习惯）
    // event.preventDefault(); // 对于type="button"的按钮，通常不需要，但对于type="submit"的按钮，这非常重要

    let userTitle = document.getElementById("title").value;
    let userAuthor = document.getElementById("author").value;
    let userGenre = document.getElementById("genre").value;
    let userReview = document.getElementById("reviews").value;

    // 简单验证（HTML的required属性已提供基础验证）
    if (!userTitle || !userAuthor || !userGenre || !userReview) {
        alert("请填写所有必填字段！");
        return;
    }

    const newObj = new Books(userTitle, userAuthor, userGenre, userReview);
    myArray.push(newObj);
    console.log("当前数组:", myArray);

    // 将更新后的数组转换为JSON字符串并存储到sessionStorage
    sessionStorage.setItem("booksArray", JSON.stringify(myArray));
    console.log("数据已存储到sessionStorage");

    // 渲染或更新页面显示
    renderBooks();

    // 清空表单字段
    document.getElementById("title").value = '';
    document.getElementById("author").value = '';
    document.getElementById("genre").value = '';
    document.getElementById("reviews").value = '';
});

// 示例：一个用于渲染图书列表的函数
function renderBooks() {
    // 假设你有一些DOM元素来显示图书信息
    // 这里只是一个简单的示例，实际应用中可能需要更复杂的列表渲染
    const bookTitleDisplay = document.getElementById("bookTitle");
    const bookAuthorDisplay = document.getElementById("bookAuthor");
    const bookGenreDisplay = document.getElementById("bookGenre");
    const bookReviewDisplay = document.getElementById("bookReview");

    if (myArray.length > 0) {
        const lastBook = myArray[myArray.length - 1]; // 显示最新添加的书籍
        bookTitleDisplay.textContent = `标题: ${lastBook.getTitle()}`;
        bookAuthorDisplay.textContent = `作者: ${lastBook.getAuthor()}`;
        bookGenreDisplay.textContent = `类型: ${lastBook.getGenre()}`;
        bookReviewDisplay.textContent = `评论: ${lastBook.getReview()}`;
    } else {
        bookTitleDisplay.textContent = '';
        bookAuthorDisplay.textContent = '';
        bookGenreDisplay.textContent = '';
        bookReviewDisplay.textContent = '';
    }
    console.log("页面已更新显示。");
}

// 首次加载时渲染已有的数据（如果存在）
renderBooks();

登录后复制

关于 sessionStorage

sessionStorage 是Web Storage API的一部分，它允许Web应用程序在浏览器会话期间存储键/值对。数据在用户关闭浏览器标签页或窗口时被清除。它非常适合存储临时性、会话相关的数据。

sessionStorage.setItem(key, value): 存储一个键值对。value必须是字符串。
sessionStorage.getItem(key): 根据key获取存储的值。
sessionStorage.removeItem(key): 移除指定的键值对。
sessionStorage.clear(): 清除所有存储的键值对。

重要提示： sessionStorage 只能存储字符串。因此，当存储JavaScript对象或数组时，必须使用JSON.stringify()将其转换为JSON字符串；当检索时，需要使用JSON.parse()将其转换回JavaScript对象或数组。

完整的HTML与JavaScript示例

将上述修改整合后，一个不刷新页面的图书目录添加功能可以实现如下：

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="booksCSS.css"> <!-- 假设有CSS文件 -->
    <title>Book Catalogue</title>
</head>
<body>
    <h1>Your favourite book catalogue</h1>
    <form>
        <label for="title">Please enter the title of your book:</label>
        <input type="text" name="title" id="title" required><br/>

        <label for="author">Please enter the author of the book</label>
        <input type="text" name="author" id="author" required><br/>

        <label for="genre">Please enter the genre of the book:</label>
        <input type="text" name="genre" id="genre" required><br/>

        <label for="reviews">Please enter your review on the book:</label>
        <input type="text" name="reviews" id="reviews" required>

        <button type="button" id="addBttn">Add</button> <!-- 关键在这里 -->
    </form>

    <h2>最新添加的图书：</h2>
    <p id="bookTitle"></p>
    <p id="bookAuthor"></p>
    <p id="bookGenre"></p>
    <p id="bookReview"></p>

    <script src="booksJS.js"></script>
</body>
</html>

登录后复制

booksJS.js:

let myArray = []; // 初始化数组

// 在页面加载时尝试从sessionStorage加载数据
const storedArray = sessionStorage.getItem("booksArray");
if (storedArray) {
    try {
        myArray = JSON.parse(storedArray);
    } catch (e) {
        console.error("解析sessionStorage数据失败:", e);
        myArray = []; // 解析失败则清空数组
    }
    renderBooks(); // 渲染已有的数据
}

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", () => {
    let userTitle = document.getElementById("title").value.trim();
    let userAuthor = document.getElementById("author").value.trim();
    let userGenre = document.getElementById("genre").value.trim();
    let userReview = document.getElementById("reviews").value.trim();

    // 客户端验证，确保所有字段都已填写
    if (!userTitle || !userAuthor || !userGenre || !userReview) {
        alert("请填写所有必填字段！");
        return; // 阻止进一步操作
    }

    const newObj = new Books(userTitle, userAuthor, userGenre, userReview);
    myArray.push(newObj);
    console.log("当前图书数组:", myArray);

    // 将更新后的数组转换为JSON字符串并存储到sessionStorage
    sessionStorage.setItem("booksArray", JSON.stringify(myArray));
    console.log("数据已成功存储到sessionStorage。");

    // 更新页面显示
    renderBooks();

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

// 渲染图书列表或最新添加图书的函数
function renderBooks() {
    const bookTitleDisplay = document.getElementById("bookTitle");
    const bookAuthorDisplay = document.getElementById("bookAuthor");
    const bookGenreDisplay = document.getElementById("bookGenre");
    const bookReviewDisplay = document.getElementById("bookReview");

    // 每次渲染时，清空旧内容，然后重新填充
    bookTitleDisplay.textContent = '';
    bookAuthorDisplay.textContent = '';
    bookGenreDisplay.textContent = '';
    bookReviewDisplay.textContent = '';

    if (myArray.length > 0) {
        // 示例：显示最新添加的图书
        const lastBook = myArray[myArray.length - 1]; 
        bookTitleDisplay.textContent = `标题: ${lastBook.getTitle()}`;
        bookAuthorDisplay.textContent = `作者: ${lastBook.getAuthor()}`;
        bookGenreDisplay.textContent = `类型: ${lastBook.getGenre()}`;
        bookReviewDisplay.textContent = `评论: ${lastBook.getReview()}`;
    } else {
        // 如果数组为空，可以显示提示信息
        bookTitleDisplay.textContent = "暂无图书信息。";
    }
}

// 页面加载完成后，立即调用一次渲染，显示sessionStorage中已有的数据
renderBooks();

登录后复制

总结与最佳实践

明确按钮类型： 在HTML表单中，如果希望通过JavaScript处理按钮点击而不触发页面刷新，务必将<button>的type属性明确设置为"button"。
event.preventDefault()： 如果需要使用type="submit"的按钮（例如为了利用浏览器内置的验证），则应在表单的submit事件监听器中使用event.preventDefault()来阻止默认的表单提交行为。
数据持久化： sessionStorage和localStorage是客户端存储数据的有效方式。sessionStorage用于会话期间的临时数据，localStorage用于跨会话的持久数据。
JSON序列化： 在使用Web Storage API存储复杂数据结构（如对象或数组）时，必须使用JSON.stringify()将其转换为字符串，并在读取时使用JSON.parse()将其转换回JavaScript对象。
客户端验证： 即使HTML提供了required属性进行基本验证，也建议在JavaScript中添加额外的客户端验证逻辑，以提供更好的用户体验和更灵活的验证规则。
代码可读性与维护性： 保持JavaScript代码结构清晰，将DOM操作和数据处理逻辑分离，有助于提高代码的可读性和未来的维护性。

以上就是HTML表单提交与JavaScript事件处理：避免意外页面刷新的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

JavaScript与CSS：实现容器内可拖拽、可缩放且边界受限的DIV元素 Vue3/Vuetify中内容自适应父容器尺寸的实现指南实现可拖拽和调整大小的DIV组件，并限制在父容器内 Vue3/Vuetify应用中实现内容自适应与避免溢出的CSS策略在父容器内实现可拖拽、可调整大小且边界受限的HTML元素