正文

网页表单提交后不刷新页面，保持表单内容不变的方法

/0 浏览量
0404

在网页开发中，当用户提交表单时，通常会触发页面的刷新，导致表单内容被清空。为了避免这种情况，我们可以采用以下几种方法来实现表单提交后不刷新页面，同时保持表单内容不变。

1. 使用 AJAX（Asynchronous JavaScript and XML）

AJAX 是一种技术，允许网页与服务器进行异步通信，而无需重新加载整个页面。以下是使用 AJAX 实现表单提交的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单提交不刷新页面</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <form id="myForm">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username">
        <button type="button" id="submitBtn">提交</button>
    </form>

    <script>
        $(document).ready(function(){
            $('#submitBtn').click(function(){
                $.ajax({
                    type: 'POST',
                    url: 'submit_form.php', // 服务器处理表单提交的地址
                    data: $('#myForm').serialize(),
                    success: function(response){
                        // 处理服务器返回的数据
                        console.log(response);
                    }
                });
            });
        });
    </script>
</body>
</html>

在上面的代码中，我们使用 jQuery 库来简化 AJAX 的实现。当用户点击提交按钮时，会触发 AJAX 请求，将表单数据发送到服务器，并在不刷新页面的情况下处理返回的数据。

2. 使用 Fetch API

Fetch API 是一种现代的、基于 Promise 的 HTTP 客户端，用于在网页中发起网络请求。以下是一个使用 Fetch API 实现表单提交的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单提交不刷新页面</title>
</head>
<body>
    <form id="myForm">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username">
        <button type="button" id="submitBtn">提交</button>
    </form>

    <script>
        document.getElementById('submitBtn').addEventListener('click', function(){
            fetch('submit_form.php', {
                method: 'POST',
                body: new FormData(document.getElementById('myForm'))
            }).then(response => response.text())
            .then(data => {
                // 处理服务器返回的数据
                console.log(data);
            });
        });
    </script>
</body>
</html>

在这段代码中，我们使用 Fetch API 来发送表单数据，并在不刷新页面的情况下处理返回的数据。

3. 使用 JavaScript 的 onsubmit 事件

除了使用 AJAX 和 Fetch API，我们还可以通过监听表单的 onsubmit 事件来阻止默认的表单提交行为。以下是一个示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单提交不刷新页面</title>
</head>
<body>
    <form id="myForm" onsubmit="event.preventDefault(); submitForm();">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username">
        <button type="submit">提交</button>
    </form>

    <script>
        function submitForm(){
            // 使用 AJAX 或 Fetch API 发送表单数据
            // ...
        }
    </script>
</body>
</html>

在上面的代码中，我们通过监听 onsubmit 事件来阻止表单的默认提交行为，然后调用 submitForm 函数来处理表单数据。

通过以上方法，我们可以实现网页表单提交后不刷新页面，同时保持表单内容不变。在实际开发中，可以根据具体需求选择合适的方法。

-- 展开阅读全文 --