js提交form表单不跳转

在使用JavaScript提交表单时，如果不希望页面发生跳转，可以采用以下方法：

基本概念

传统的表单提交（通过<form>标签的action属性和method属性）会导致页面刷新或跳转到另一个页面。为了避免这种情况，可以使用JavaScript来拦截表单提交事件，并通过AJAX（Asynchronous JavaScript and XML）技术来异步提交数据。

优势

用户体验：页面不会刷新，用户可以继续与页面交互。
性能：减少了不必要的页面加载，提高了响应速度。
灵活性：可以在提交数据的同时执行其他操作，如显示加载动画、验证数据等。

类型

XMLHttpRequest：传统的AJAX技术。
Fetch API：现代浏览器支持的更简洁的AJAX技术。
第三方库：如jQuery的$.ajax方法。

应用场景

实时搜索建议
分页加载数据
表单验证和提交
动态内容更新

示例代码

以下是使用Fetch API和XMLHttpRequest的示例代码：

使用Fetch API

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Submission with Fetch API</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);

            fetch('/submit-form', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
                // 处理成功响应
            })
            .catch((error) => {
                console.error('Error:', error);
                // 处理错误
            });
        });
    </script>
</body>
</html>

使用XMLHttpRequest

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Submission with XMLHttpRequest</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) {
                    console.log('Success:', JSON.parse(xhr.responseText));
                    // 处理成功响应
                } else {
                    console.error('Error:', xhr.statusText);
                    // 处理错误
                }
            };
            xhr.onerror = function () {
                console.error('Error:', xhr.statusText);
                // 处理错误
            };
            xhr.send(formData);
        });
    </script>
</body>
</html>