在Web开发中，表单是非常普遍的需求，而JavaScript是一种可以让表单更加交互化的工具。通过JavaScript，我们可以在客户端处理表单，并且能够提交表单到服务器。在本文中，我们将带领大家一步步学习如何使用JavaScript提交表单。

第一步：HTML中的表单

在讲解JavaScript提交表单之前，我们需要先创建一个表单。以下是一个简单的表单：

```

```

以上表单包括姓名、性别、出生日期以及爱好四个字段，其中每个字段都有一个输入框，并且有一个提交按钮。该表单的id为“myForm”。

第二步：使用JavaScript获取表单值

当用户填写并提交表单时，我们需要通过JavaScript获取表单中的值。以下是获取表单的值的代码：

```

var form = document.getElementById("myForm");

var name = form.elements["name"].value;

var gender = form.elements["gender"].value;

var birth = form.elements["birth"].value;

var hobby = [];

for (var i = 0; i < form.elements["hobby"].length; i++) {

if (form.elements["hobby"][i].checked) {

hobby.push(form.elements["hobby"][i].value);

}

}

```

我们首先通过id获取到表单元素，然后通过表单元素的name属性获取每个表单元素的值。在获取爱好（hobby）的值时，由于它是多选框，我们需要使用for循环来获取选中的值。

第三步：使用JavaScript提交表单

我们现在已经获取了表单中的值，接下来我们将这些值提交到服务器。以下是提交表单的代码：

```

var xhr = new XMLHttpRequest();

var url = "http://example.com/submit"

xhr.open("POST", url, true);

xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

xhr.onreadystatechange = function() {

if (xhr.readyState === 4 && xhr.status === 200) {

console.log(xhr.responseText);

}

};

var data = JSON.stringify({name: name, gender: gender, birth: birth, hobby: hobby});

xhr.send(data);

```

我们使用XMLHttpRequest对象来发送POST请求，并将表单数据以JSON格式的字符串发送到服务器。我们还为请求设置了Content-Type头，以确保服务器能够正确解析数据。我们还添加了onreadystatechange事件监听器，用于处理服务器的响应。在该事件监听器内部，我们判断响应的状态码和readyState属性，如果都符合要求，就输出服务器的响应内容。

到此为止，我们已经介绍了如何使用JavaScript提交表单。希望本文能够帮助读者更加深入了解JavaScript和web开发。