Ajax 清除表单 - Javascript

当需要清空表单中的所有输入时，可以使用 Ajax 技术来清除表单中的数据。这个过程是通过向服务器发送一个空的 POST 请求来完成的。本文将介绍如何使用 Javascript 和 Ajax 清除表单中的数据。

实现步骤

1. 获取需要清除的表单元素。可以使用 document.getElementById()或 document.querySelector()方法来获取表单元素。

   const form = document.getElementById('form');
   

2. 监听表单的提交事件。当表单提交时，取消默认事件并发送 Ajax 请求。

   form.addEventListener('submit', function(event) {
       event.preventDefault();
       clearForm(this);
   });
   

3. 定义清除表单的函数，并在函数中发送 Ajax 请求。

   function clearForm(form) {
       const xhr = new XMLHttpRequest();
       const url = form.getAttribute('action');
       xhr.open('POST', url);
   
       xhr.onload = function() {
           if (xhr.status === 200) {
               form.reset();
           }
       };
   
       xhr.send();
   }
   

   在这个函数中，我们创建了一个 XMLHttpRequest 对象，并使用 open() 方法打开一个 POST 请求。url 变量从表单的 action 属性中获取，服务器会忽略空的 POST 请求。当 Ajax 请求成功时，我们使用 form.reset() 方法来清空表单中的输入。

4. 最后，确保将表单的 method 属性设置为 POST。

完整代码

const form = document.getElementById('form');

form.addEventListener('submit', function(event) {
    event.preventDefault();
    clearForm(this);
});

function clearForm(form) {
    const xhr = new XMLHttpRequest();
    const url = form.getAttribute('action');
    xhr.open('POST', url);

    xhr.onload = function() {
        if (xhr.status === 200) {
            form.reset();
        }
    };

    xhr.send();
}

总结

通过使用 Javascript 和 Ajax 技术，可以轻松地清除表单中的所有输入。需要注意的是，服务器必须能够接受和处理空的 POST 请求。