用于发布表单输入值的Javascript函数

基础概念

用于发布表单输入值的JavaScript函数通常是指处理用户在HTML表单中输入的数据，并将这些数据发送到服务器的函数。这个过程通常涉及到获取表单元素、验证输入值、构建请求并发送数据。

类型

同步提交：使用XMLHttpRequest或fetch API同步发送数据到服务器。
异步提交：使用XMLHttpRequest或fetch API异步发送数据到服务器，不会阻塞页面的其他操作。
表单提交事件处理：通过监听表单的submit事件来处理表单提交。

应用场景

网站注册和登录表单
数据收集表单
搜索表单
联系表单

示例代码

以下是一个使用fetch API异步提交表单数据的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Submission</title>
</head>
<body>
    <form id="myForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br><br>
        <button type="submit">Submit</button>
    </form>

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

            const formData = new FormData(this);
            const data = {};
            formData.forEach((value, key) => {
                data[key] = value;
            });

            fetch('/submit-form', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        });
    </script>
</body>
</html>