js form 同步提交

在JavaScript中，表单（form）的同步提交是指当用户填写完表单并触发提交事件后，浏览器会按照正常的HTTP请求流程将表单数据发送到服务器，并等待服务器的响应。在这个过程中，浏览器会进入等待状态，用户界面会暂时冻结，直到服务器响应返回或者请求超时。

基础概念

同步提交：浏览器发送请求后，会阻塞后续操作，直到收到响应或者超时。
异步提交：通过Ajax或者Fetch API等技术，可以在不刷新页面的情况下与服务器进行数据交互。

同步提交的优势

实现简单，无需额外的JavaScript代码。
对于小型应用或者不需要实时反馈的场景，用户体验足够好。

同步提交的劣势

页面会冻结，用户体验较差，特别是在网络状况不佳时。
无法实现局部刷新，每次提交都会导致整个页面重新加载。

应用场景

小型网站或者内部系统，对用户体验要求不高。
表单数据量小，提交频率低的情况。

遇到的问题及原因

页面冻结：由于同步提交会阻塞浏览器的主线程，用户无法进行其他操作。
用户体验差：页面刷新会导致用户丢失当前页面的状态，比如填写了一半的表单数据。

解决方法

为了避免同步提交带来的问题，推荐使用异步提交方式，例如使用Ajax或Fetch API。

使用Ajax进行异步提交

document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为

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

    fetch('/submit-form', { // 发送POST请求到服务器
        method: 'POST',
        body: formData
    })
    .then(response => response.json()) // 解析响应数据
    .then(data => {
        console.log('Success:', data); // 处理成功响应
    })
    .catch((error) => {
        console.error('Error:', error); // 处理错误
    });
});

使用Fetch API进行异步提交

document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault();

    var formData = new FormData(this);

    fetch('/submit-form', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        // 更新页面内容或显示成功消息
    })
    .catch(error => {
        // 显示错误消息
    });
});