js实现表单提交后刷新页面

在前端开发中，使用JavaScript实现表单提交后刷新页面可以通过多种方式完成。以下是几种常见的方法：

方法一：使用`submit()`方法和`location.reload()`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Submission</title>
</head>
<body>
    <form id="myForm">
        <input type="text" name="username" placeholder="Username">
        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            // 获取表单数据
            const formData = new FormData(this);

            // 模拟表单提交（实际应用中应使用AJAX或Fetch API）
            fetch('/submit-form', {
                method: 'POST',
                body: formData
            }).then(response => {
                if (response.ok) {
                    // 提交成功后刷新页面
                    location.reload();
                } else {
                    alert('Form submission failed!');
                }
            }).catch(error => {
                console.error('Error:', error);
                alert('An error occurred during form submission.');
            });
        });
    </script>
</body>
</html>

方法二：使用`XMLHttpRequest`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Submission</title>
</head>
<body>
    <form id="myForm">
        <input type="text" name="username" placeholder="Username">
        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            const formData = new FormData(this);
            const xhr = new XMLHttpRequest();

            xhr.open('POST', '/submit-form', true);
            xhr.onload = function () {
                if (xhr.status === 200) {
                    // 提交成功后刷新页面
                    location.reload();
                } else {
                    alert('Form submission failed!');
                }
            };
            xhr.send(formData);
        });
    </script>
</body>
</html>

方法三：使用表单的`action`属性和`method`属性

如果你不需要在提交前进行任何处理，可以直接使用表单的action属性和method属性，并在服务器端处理表单数据后返回一个重定向响应。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Submission</title>
</head>
<body>
    <form action="/submit-form" method="POST">
        <input type="text" name="username" placeholder="Username">
        <button type="submit">Submit</button>
    </form>
</body>
</html>

在服务器端（例如使用Node.js和Express）：

const express = require('express');
const app = express();

app.use(express.urlencoded({ extended: true }));

app.post('/submit-form', (req, res) => {
    const username = req.body.username;
    // 处理表单数据
    console.log(`Username: ${username}`);

    // 重定向到当前页面以刷新页面
    res.redirect('back');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});