From表单提交时为什么会刷新页面？怎么预防刷新？

预防刷新主要有以下几种方法：

使用 AJAX (Asynchronous JavaScript and XML)：这是最常用的方法。AJAX 允许 JavaScript 在后台异步地向服务器发送数据，而无需刷新整个页面。服务器返回的数据可以用来更新部分页面内容，从而实现无刷新提交。

// 获取表单元素

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

form.addEventListener('submit', (event) => {

// 阻止默认的表单提交行为

event.preventDefault();

// 获取表单数据

const formData = new FormData(form);

// 使用 Fetch API 发送 AJAX 请求

fetch(form.action, {

method: form.method,

body: formData

})

.then(response => response.json()) // 或其他数据格式

.then(data => {

// 处理服务器返回的数据

console.log('Success:', data);

// 更新页面内容

// ...

})

.catch((error) => {

console.error('Error:', error);

});

});

使用 FormData 对象: FormData 对象可以方便地获取表单数据，并用于 AJAX 请求中。它可以处理各种表单元素，包括文件上传。

使用 preventDefault() 方法: 在 JavaScript 的表单提交事件处理函数中，调用 event.preventDefault() 可以阻止浏览器的默认提交行为，从而避免页面刷新。

修改 form 标签的 target 属性: 可以将 form 标签的 target 属性设置为一个隐藏的 iframe 的名称。这样，表单提交后，服务器返回的内容会在 iframe 中加载，而不会影响主页面。