在web开发中，表单是非常常见的组件之一。一旦用户填写了表单，我们便需要将数据传至服务器进行处理并根据返回结果进行后续操作。在这个过程中，我们可以使用ajax进行异步提交，不需要页面跳转即可完成表单的提交。

首先，我们来看一下基本的表单提交代码：

<form onsubmit="return handleSubmit()">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit">Submit</button>
</form>
<script>
function handleSubmit() {
var username = document.getElementsByName('username')[0].value;
var password = document.getElementsByName('password')[0].value;
alert('Username: ' + username + ', Password: ' + password);
return false;
}
</script>

在上述代码中，我们定义了一个表单，并在表单提交时调用了handleSubmit函数。该函数会获取表单中的username和password，然后在提交前弹出提示框。但是，这个表单提交还是同步的，即需要等待数据提交到服务器，然后才会进行下一步操作。

而异步提交则不同，我们需要在表单提交时使用ajax进行数据传输，并在回调函数中进行下一步操作。我们可以使用原生JS实现异步提交，如下示例：

<form onsubmit="return false;">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit" onclick="handleAsyncSubmit()">Submit</button>
</form>
<script>
function handleAsyncSubmit() {
var xhr = new XMLHttpRequest();
var url = 'http://example.com/submit';
var username = document.getElementsByName('username')[0].value;
var password = document.getElementsByName('password')[0].value;
var params = 'username=' + username + '&password=' + password;
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
xhr.send(params);
}
</script>

在上述代码中，我们在表单提交时调用了handleAsyncSubmit函数。该函数用XMLHttpRequest对象异步地向服务器发送数据。在回调函数中，我们检查了XHR请求的准备状态和状态码，并且在状态为200时弹出了服务器返回的数据。

除了原生JS方法外，大部分前端框架都提供了异步提交表单的封装方法，如jQuery的$.ajax()方法为例：

<form id="test-form">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
$(document).on('submit', '#test-form', function(e){
e.preventDefault();
var form_data = $(this).serialize();
var url = 'http://example.com/submit';
$.ajax({
type: 'POST',
url: url,
data: form_data,
success: function(response){
alert(response);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
alert(errorThrown);
}
});
});
</script>

在上述代码中，我们使用了jQuery的$.ajax()方法来异步提交表单。该方法接收的参数与原生JS方法类似，其中data参数使用了$(this).serialize()方法将表单中的数据序列化后传入。在回调函数中，我们检查了请求是否成功，成功则弹出服务器返回的数据，否则弹出错误提示。

总之，异步提交表单是一种使用ajax实现的高效的提交方式，它不需要页面跳转即可完成表单数据的传输和后续操作。原生JS和前端框架都提供了封装的方法进行异步提交，供我们根据自己的需求选择使用。