下面是关于“JS两种类型的表单提交方法实例分析”的完整攻略：

JS两种类型的表单提交方法实例分析

提交表单的两种方式

在JS中，可以使用两种不同的方式来提交表单：普通表单提交和Ajax表单提交。

1. 普通表单提交

普通表单是指通过浏览器的提交按钮或通过JS代码完成表单的提交。当我们使用表单提交时，表单会重新加载页面并传递表单数据到服务器。普通表单提交方法很简单，只需要在提交按钮的事件处理函数中指定表单action属性值和method属性值即可。

<form action="submit.php" method="POST">
    <!-- 表单控件 -->
    <input type="text" name="username" />
    <input type="text" name="password" />
    <input type="submit" value="提交" onclick="submitForm();" />
</form>

function submitForm() {
    document.forms[0].submit();
}

1. Ajax表单提交

Ajax表单提交是指通过JS代码异步地提交表单数据，并接收服务器返回的响应结果。相对于普通表单提交，Ajax表单提交不会重新加载整个页面，而只会更新提交表单所在的部分区域。这种方式能够增强用户提交表单的体验。下面是Ajax表单提交的示例代码。

<form>
    <!-- 表单控件 -->
    <input type="text" name="username" />
    <input type="text" name="password" />
    <input type="button" value="提交" onclick="submitForm();" />
</form>

function submitForm() {
    let xhr = new XMLHttpRequest();
    xhr.open('POST', 'submit.php', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let response = xhr.responseText;
            console.log(response);
        }
    };
    xhr.send(new FormData(document.forms[0]));
}

在以上代码中，我们使用了XMLHttpRequest对象来创建一个AJAX请求，然后通过new FormData()方法来构建一个表单数据对象。在请求发送之后，我们可以通过onreadystatechange事件来监听响应结果。

示例说明

示例一：注册表单

我们现在有一个简单的注册表单，包括用户名、密码和邮箱地址三个字段。当用户点击“提交”按钮时，可以使用普通表单提交或Ajax表单提交两种方式。

<form action="register.php" method="POST">
    <label>用户名：</label><input type="text" name="username" /><br />
    <label>密码：</label><input type="password" name="password" /><br />
    <label>邮箱地址：</label><input type="text" name="email" /><br />
    <input type="submit" value="提交（普通表单提交）" />
    <input type="button" value="提交（Ajax表单提交）" onclick="submitForm();" />
</form>

function submitForm() {
    let xhr = new XMLHttpRequest();
    xhr.open('POST', 'register.php', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let response = xhr.responseText;
            console.log(response);
        }
    };
    xhr.send(new FormData(document.forms[0]));
}

示例二：文件上传表单

我们现在有一个包含文件上传功能的表单。当用户选择文件并点击“上传”按钮时，可以使用普通表单提交或Ajax表单提交两种方式。

<form action="upload.php" method="POST" enctype="multipart/form-data">
    <label>选择文件：</label><input type="file" name="file" /><br />
    <input type="submit" value="上传（普通表单提交）" />
    <input type="button" value="上传（Ajax表单提交）" onclick="submitForm();" />
</form>

function submitForm() {
    let xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload.php', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let response = xhr.responseText;
            console.log(response);
        }
    };
    xhr.send(new FormData(document.forms[0]));
}

以上就是关于“JS两种类型的表单提交方法实例分析”的攻略。需要注意的是，在使用Ajax表单提交方式时，必须将表单数据对象作为send()方法的参数传递进去。