在Web开发过程中，表单是常见的数据交互方式，而在这个过程中获取表单数据就显得尤为重要。本文从多个方面进行阐述，让你深入了解JS获取表单数据的各种方法。
一、JS获取表单数据的方式
JS获取表单数据一般有两种方式：原生JS获取表单数据和使用第三方库（如jQuery）获取表单数据。下面我们将分别介绍这两种方式。
二、原生JS获取表单数据
要获取表单数据，我们可以使用表单元素提供的方法和属性，比较常用的有以下几种： 1. `form.elements`：获取表单中的所有元素，包括input、select、button等； 2. `form.elements.name`：获取指定name的表单元素，可以返回一个节点或者一个节点列表； 3. `form.elements.type`：获取指定type的表单元素； 4. `form.elements.value`：获取表单元素的值。 下面是一个简单的代码示例：
<form id="myForm">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">
</form>
<script>
const form = document.getElementById('myForm');
console.log(form.elements.username.value); // 获取用户名
console.log(form.elements.password.value); // 获取密码
</script>
三、JS获取表单提交的数据
通过表单的`submit`事件，我们可以获取表单提交的数据。我们可以使用`FormData`对象来获取表单数据，也可以手动获取表单中每个表单元素的值。下面是两个示例： 1. 使用`FormData`对象获取表单数据
<form id="myForm">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">
</form>
<script>
const form = document.getElementById('myForm');
form.addEventListener('submit', event => {
event.preventDefault(); // 阻止表单默认提交事件
const formData = new FormData(form);
console.log(formData.get('username')); // 获取用户名
console.log(formData.get('password')); // 获取密码
});
</script>
2. 手动获取表单中每个表单元素的值
<form id="myForm">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">
</form>
<script>
const form = document.getElementById('myForm');
form.addEventListener('submit', event => {
event.preventDefault(); // 阻止表单默认提交事件
const username = form.elements.username.value; // 获取用户名
const password = form.elements.password.value; // 获取密码
console.log(username);
console.log(password);
});
</script>
四、获取表单所有数据的方法
有时候，我们需要获取表单中所有的数据，包括复选框和多选框等。这时候，我们可以通过循环表单元素来获得所有表单数据。下面是一个简单的示例代码：
<form id="myForm">
<input type="text" name="username">
<input type="password" name="password">
<input type="checkbox" name="checkbox" value="1">选项1</checkbox>
<input type="checkbox" name="checkbox" value="2">选项2</checkbox>
<input type="radio" name="radio" value="1">单选项1</radio>
<input type="radio" name="radio" value="2">单选项2</radio>
<select name="select">
<option value="1">选项1</option>
<option value="2">选项2</option>
</select>
<textarea name="textarea"></textarea>
<input type="submit" value="提交">
</form>
<script>
const form = document.getElementById('myForm');
form.addEventListener('submit', event => {
event.preventDefault(); // 阻止表单默认提交事件
const formData = {};
for (let i = 0; i < form.elements.length; i++) {
const element = form.elements[i];
if (element.name) {
if (element.type === 'checkbox' || element.type === 'radio') {
if (element.checked) {
if (!formData[element.name]) {
formData[element.name] = element.value;
} else {
formData[element.name] += `, ${element.value}`;
}
}
} else {
formData[element.name] = element.value;
}
}
}
console.log(formData);
});
</script>
五、JS获取表单数据并求和
有时候，我们需要对表单数据做一些复杂的处理，例如求和、计算平均值等。下面是一个简单的例子，展示如何获取表单中的数值数据并求和：
<form id="myForm">
<input type="number" name="number1">
<input type="number" name="number2">
<input type="submit" value="提交">
</form>
<script>
const form = document.getElementById('myForm');
form.addEventListener('submit', event => {
event.preventDefault(); // 阻止表单默认提交事件
let sum = 0;
for (let i = 0; i < form.elements.length; i++) {
const element = form.elements[i];
if (element.type === 'number') {
sum += parseInt(element.value);
}
}
console.log(sum);
});
</script>
六、JS获取form表单数据
如果我们有多个表单，我们需要分别处理每个表单的提交事件。这时候，我们可以通过在form标签上添加`data-type`属性来进行区分。例如：
<form id="form1" data-type="type1">
<!-- ... -->
</form>
<form id="form2" data-type="type2">
<!-- ... -->
</form>
然后在JS代码中，我们可以根据`data-type`属性值来进行判断，如下所示：
<script>
const forms = document.getElementsByTagName('form');
for (let i = 0; i < forms.length; i++) {
const form = forms[i];
form.addEventListener('submit', event => {
event.preventDefault(); // 阻止表单默认提交事件
// 获取 data-type 属性
const type = form.dataset.type;
// 获取表单数据的方式略
// ...
// 处理数据的方式略
// ...
});
}
</script>
七、jQuery获取表单数据
如果使用jQuery，我们可以使用`serializeArray()`和`serialize()`两种方法来获取表单数据。其中，`serializeArray()`可以将表单数据转换成一个键值对数组，`serialize()`则以URL编码的方式返回表单数据。下面是一个示例代码：
<form id="myForm">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">
</form>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
const form = $('#myForm');
form.submit(event => {
event.preventDefault(); // 阻止表单默认提交事件
const formData = form.serializeArray();
console.log(formData);
});
</script>
八、获取表单数据存入数据库
最后，我们来讲一下如何将表单数据存入数据库。首先，前端需要将表单数据发送到后端，后端再进行存储等操作。可以使用AJAX技术进行数据的发送和接收，也可以直接使用form标签的`action`和`method`属性指定表单提交的地址和方式。下面是一个简单的示例代码：
<form id="myForm" action="/submit" method="post">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">
</form>
<script>
const form = $('#myForm');
form.submit(event => {
event.preventDefault(); // 阻止表单默认提交事件
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
success: response => {
console.log(response);
}
});
});
</script>
以上就是JS获取表单数据的各种方法，希望对你有所帮助。
