【Ajax学习】通过Ajax提交表单数据

在Ajax中，我们可以使用XMLHttpRequest或现代的fetchAPI来提交表单数据。以下是使用这两种方法的示例代码。

使用XMLHttpRequest的示例：

// 获取表单元素
var form = document.getElementById('myForm');
 
// 添加事件监听器
form.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
 
    var xhr = new XMLHttpRequest();
    xhr.open('POST', form.action, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
        }
    };
 
    // 序列化表单数据
    var formData = new FormData(form);
    var data = new URLSearchParams(formData).toString();
 
    // 发送数据
    xhr.send(data);
});

使用fetchAPI的示例：

// 获取表单元素
var form = document.getElementById('myForm');
 
// 添加事件监听器
form.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
 
    // 序列化表单数据
    var formData = new FormData(form);
 
    // 发送请求
    fetch(form.action, {
        method: 'POST',
        body: formData,
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
});

在这两个示例中，我们都阻止了表单的默认提交行为，并使用Ajax异步提交表单数据。第一个示例使用XMLHttpRequest，第二个示例使用fetchAPI。在实际应用中，你可以根据需要选择合适的方法。