本文主要是介绍javaScript在表单提交时获取表单数据的示例代码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
《javaScript在表单提交时获取表单数据的示例代码》本文介绍了五种在JavaScript中获取表单数据的方法：使用FormData对象、手动提取表单数据、使用querySelector获取单个字...
方法 1：使用 FormData 对象
FormData 是一个方便的内置对象，用于获取表单中的键值对数据。
示例代码
<form id="myForm"> <input type="text" name="username" value="JohnDoe" /> <input type="email" name="email" value="john@example.com" /> <input type="password" name="password" value="12345" /> <button type="submitphp">Submit</button> </form> <script> document.getElementById('myForm').addEventListener('submit', function (event) { event.preventDefault(); // 阻止默认表单提交行为 // 获取表单数据 const formData = new FormData(this); // 遍历表单数据 for (let [key, value] of formData.entries()) { console.log(`${key}: ${value}`); } // 如果需要转换为 jsON 对象 const data = Object.fromEntries(formData.entries()); console.log(data); }); </script&androidgt;
解释：
FormData(this)：创建一个包含表单所有数据的对象。formData.entries()：获取键值对的迭代器。Object.fromEntries()：将键值对转换为对象。
方法 2：通过 serialize 手动提取表单数据
可以通过直接访编程问表单元素的值手动提取表单数据。
示例代码
<form id="myForm">
<input type="text" name="username" value="JohnDoe" />
<input type="email" name="email" value="john@example.com" />
<input type="password" name="password" value="12345" />
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function (event) {
event.preventDefault();
const form = event.target;
const formData = {};
// 遍历表单元素
Array.from(form.elements).forEach((element) => {
if (element.name) {
php formData[element.name] = element.value; // 获取每个字段的值
}
});
console.log(formData);
});
</script>解释
form.elements：获取表单中所有的控件（如<input>、<select>等）。- 通过
element.name识别表单字段并提取其value。
方法 3：使用 querySelector 手动获取单个字段数据
如果你只想获取某几个字段的数据，可以直接用选择器获取特定的表单字段。
示例代码
<form id="myForm">
<input type="text" id="username" name="username" value="JohnDoe" />
<input type="email" id="email" name="email" value="john@example.com" />
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function (event) {
event.preventDefault();
// 获取单个字段值
const username = document.querySelector('#username').value;
const email = document.querySelector('#email').value;
console.log(`Username: ${username}`);
console.log(`Email: ${email}`);
});
</script>解释
- 通过
querySelector获取具体字段，并访问其value。
方法 4：通过 URL 查询参数形式获取表单数据
可以将表单提交后的数据序列化成 URL 查询字符串的形式。
示例代码
<form id="myForm">
<input type="text" name="username" value="JohnDoe" />
<input type="email" name="email" value="john@example.com" />
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function (event) {
event.preventDefault();
const formData = new FormData(this);
// 转换为 URL 查询参数
const queryString = new URLSearchParams(formData).toString();
console.log(queryString); // username=JohnDoe&email=john%40example.com
});
</script>解释
URLSearchParams(formData)：将表单数据转换为查询参数格式。.toString()：生成 URL 查询字符串。
方法 5：配合 AJAX 提交表单数据
通过 fetch 或 XMLHttpRequest 可以将表单数据异步提交到服务器。
示例代码
<form id="myForm">
<input type="text" name="username" value="JohnDoe" />
<input type="email" name="email" value="john@example.com" />
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function (event) {
event.preventDefault();
const formData = new FormData(this);
// 提交表单数据到服务器
fetch('/submit', {
method: 'POST',
body: formData,
})
.then((response) => response.json())
.then((data) =>php console.log(data))
.catch((error) => console.error('Error:', error));
});
</script>解释
fetch('/submit', { method: 'POST', body: formData })：将表单数据发送到服务器。- 响应结果可以通过
response.json()处理。
总结
- 简单提取数据：使用
FormData。 - 手动提取数据：直接访问
form.elements或querySelector。 - 序列化为查询字符串：通过
URLSearchParams。 - 配合提交到服务器：结合
fetch或其他 AJAX 方法实现动态提交。
选择方法取决于实际需求，例如是否需要动态处理、是否需要提交到服务器等。
到此这篇关于JavaScript如何在表单提交的时候获取到表单数据的文章就介绍到这了,更多相关javascript表单提交获取表单数据内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程China编程(www.chinasem.cn)！
这篇关于javaScript在表单提交时获取表单数据的示例代码的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
