在编写前端页面时，我们经常需要获取表单数据并进行处理，而在JS中实现获取表单数据的方法有很多。在本文中，我们将从多个方面详细阐述如何使用JS获取Form表单提交的数据。
一、JS获取Form表单数据
在JS中，可以使用form对象中的elements属性获取表单元素，然后通过遍历该元素获取各个表单项的值。以下是一个简单的示例代码：
let form = document.querySelector('form');
let elements = form.elements;
let result = {};
for (let i = 0; i < elements.length; i++) {
let item = elements.item(i);
result[item.name] = item.value;
}
console.log(result);
在上述代码中，我们首先通过querySelector获取到了表单元素，并从中获取了所有的表单项。随后，我们取出每一个表单项，并将其name属性和value属性保存到result对象中。
二、JS获取Form表单中的值
我们可以通过表单项的name属性获取对应的值，示例代码如下：
let form = document.querySelector('form');
let value1 = form.elements['input1'].value;
let value2 = form.elements['input2'].value;
console.log(value1, value2);
上述代码中，我们通过表单项的name属性获取了对应的值，并将其保存到value1和value2中，最后将其打印到控制台上。
三、JS阻止Form表单提交
我们可以通过JS阻止表单的默认提交行为，以便在提交前对表单数据进行处理、判断或修改。示例代码如下：
let form = document.querySelector('form');
form.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交行为
// 在此处进行表单数据的处理或判断
});
在上述代码中，我们使用addEventListener监听了表单的submit事件，当表单被提交时会触发该事件，从而调用事件处理函数。在此函数中，我们调用preventDefault方法阻止了表单的默认提交行为，以便在函数内对表单数据进行处理或判断。
四、获取Form表单数据
我们通过序列化表单数据的方式获取所有表单项的值，并将其保存为一个字符串。示例代码如下：
let form = document.querySelector('form');
let formData = new FormData(form);
let data = {};
for (let entry of formData.entries()) {
data[entry[0]] = entry[1];
}
console.log(data);
在上述代码中，我们首先使用FormData对象获取了表单中所有表单项的值，并将其保存到formdata中。接着，我们使用entries方法将表单项的值逐一取出，并按照{ name: value }的格式保存到data对象中。
五、获取表单Form提交的参数
我们可以通过URLSearchParams对象获取表单提交的参数。示例代码如下：
let form = document.querySelector('form');
let params = new URLSearchParams(new FormData(form));
console.log(params.toString());
在上述代码中，我们首先使用FormData对象获取了表单中所有的表单项值，然后使用URLSearchParams对象将表单项及其值转换为参数字符串形式，并通过toString()方法将其打印到控制台上。
六、JS提交Form表单action
我们可以通过JS提交表单数据并跳转到对应的URL页面。示例代码如下：
let form = document.querySelector('form');
form.submit(); // 提交表单并跳转到对应的URL页面
在上述代码中，我们使用了submit()方法提交表单数据并跳转到对应的URL页面。如果需要在提交前对表单数据进行处理或判断，我们可以使用addEventListener监听submit事件，并在事件处理函数中进行相应的处理。
七、JS提交Form表单的AJAX
我们可以使用AJAX方式向后端提交表单数据，以实现异步数据提交和响应。示例代码如下：
let form = document.querySelector('form');
let xhr = new XMLHttpRequest();
xhr.open('POST', form.action);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.responseText);
}
};
let data = new FormData(form);
xhr.send(new URLSearchParams(data));
在上述代码中，我们首先创建了一个XMLHttpRequest对象xhr，并使用open()方法指定了请求的方式、URL和异步参数，然后使用setRequestHeader()方法设置了请求头信息，并使用send()方法发送表单数据。最后，在onreadystatechange事件中处理异步请求的响应。
八、原生JS用AJAX提交Form表单
我们也可以使用原生JS封装AJAX方法，以方便使用和调用。示例代码如下：
function ajax(options) {
let xhr = new XMLHttpRequest();
xhr.open(options.type || 'POST', options.url);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
options.success && options.success(xhr.responseText, xhr);
} else {
options.error && options.error(xhr.statusText, xhr);
}
options.complete && options.complete(xhr.responseText, xhr);
}
}
xhr.timeout = options.timeout || 0;
xhr.ontimeout = function() {
options.timeout && options.timeout(xhr);
}
xhr.onerror = function() {
options.error && options.error(xhr.statusText, xhr);
}
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
let data = new FormData(options.form);
xhr.send(new URLSearchParams(data));
}
let form = document.querySelector('form');
ajax({
form: form,
url: form.action,
success: function(response, xhr) {
console.log(response);
},
error: function(statusText, xhr) {
console.error(statusText);
}
});
在上述代码中，我们封装了一个ajax函数，并使用XMLHttpRequest对象封装了异步请求方法。在请求执行时，我们监听了XMLHttpRequest对象的readyState、status、timeout和error事件，并在相应的事件处理函数中执行相应的操作。
九、JS表单获取提交的数据
在Python Flask中，我们可以使用form属性获取表单提交的数据。示例代码如下：
from flask import request
@app.route('/submit_form', methods=['POST'])
def submit_form():
username = request.form.get('username')
password = request.form.get('password')
return 'Username: {}, Password: {}'.format(username, password)
在上述代码中，我们使用request对象的form属性获取表单提交的数据，并根据需要进行处理、判断或重定向操作。
十、Flask提交表单用Form好还是JS好
在Python Flask中，我们可以使用Flask-Form和WTForms库来实现后端表单验证功能。对于表单验证功能比较简单的项目，我们可以使用JS来实现前端表单验证，并在提交时进行验证和提示。对于表单验证功能较为复杂的项目，则需要采用Flask-Form或WTForms库来实现后端表单验证。 综上所述，我们可以根据实际需求和项目复杂度来选择采用JS还是Flask-Form或WTForms库来实现表单数据的提交和验证。
结语
本文从多个方面详细阐述了如何使用JS获取Form表单提交的数据，包括获取表单数据、获取表单项的值、阻止表单提交、获取表单数据、获取表单提交的参数、提交表单action、提交表单的AJAX、原生JS用AJAX提交表单以及Flask提交表单用Form好还是JS好选取等内容。希望对读者了解JS和表单数据提交有所帮助。
