问小白 wenxiaobai
资讯
历史
科技
环境与自然
成长
游戏
财经
文学与艺术
美食
健康
家居
文化
情感
汽车
三农
军事
旅行
运动
教育
生活
星座命理

HTML表单数据获取完全指南：从基础DOM到高级AJAX

创作时间:
作者:
@小白创作中心

HTML表单数据获取完全指南：从基础DOM到高级AJAX

引用
1
来源
1.
https://docs.pingcode.com/baike/3016050

在Web开发中，获取和处理表单数据是一个基础且常用的功能。本文将详细介绍如何使用JavaScript的DOM方法、FormData对象、AJAX请求以及jQuery库来获取和处理表单数据。这些方法各有优劣，适合不同场景使用。


HTML如何获得表单的数据，可以通过以下几种方式：使用JavaScript的DOM方法、使用FormData对象、通过AJAX请求发送数据、利用第三方库如jQuery。其中，使用JavaScript的DOM方法是最基础且常用的一种方式，适合初学者掌握。下面我们将详细介绍这几种方法的使用场景和具体实现步骤。

一、使用JavaScript的DOM方法

使用JavaScript的DOM方法获取表单数据是最基础的方法。通过查询DOM元素，可以轻松获取用户输入的数据。

1、获取单个元素的值

使用
document.getElementById
、
document.getElementsByName
或
document.querySelector
等方法，可以获取单个表单元素的值。 

<!DOCTYPE html>  
<html>  
<body>  
<form id="myForm">  
  First name: <input type="text" id="fname" name="fname"><br>  
  Last name: <input type="text" id="lname" name="lname"><br>  
  <input type="button" onclick="getFormData()" value="Submit">  
</form>   
<script>  
function getFormData() {  
  var firstName = document.getElementById("fname").value;  
  var lastName = document.getElementById("lname").value;  
  console.log("First Name: " + firstName);  
  console.log("Last Name: " + lastName);  
}  
</script>  
</body>  
</html>

在这个例子中，通过
document.getElementById("fname").value
可以获取到用户在输入框中输入的值。

2、获取多个元素的值

使用
document.getElementsByName
或者
document.querySelectorAll
可以获取多个同名元素的值。 

<!DOCTYPE html>  
<html>  
<body>  
<form id="myForm">  
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>  
  <input type="checkbox" name="vehicle" value="Car"> I have a car<br>  
  <input type="button" onclick="getFormData()" value="Submit">  
</form>   
<script>  
function getFormData() {  
  var vehicles = document.getElementsByName("vehicle");  
  for (var i = 0; i < vehicles.length; i++) {  
    if (vehicles[i].checked) {  
      console.log("Selected Vehicle: " + vehicles[i].value);  
    }  
  }  
}  
</script>  
</body>  
</html>

在这个例子中，通过循环
document.getElementsByName("vehicle")
可以获取到所有选中的复选框的值。

二、使用FormData对象

FormData对象提供了一种更简便的方法来构建包含表单数据的键值对集合，这些数据可以使用AJAX发送。

1、基本用法

<!DOCTYPE html>  
<html>  
<body>  
<form id="myForm">  
  First name: <input type="text" name="fname"><br>  
  Last name: <input type="text" name="lname"><br>  
  <input type="button" onclick="getFormData()" value="Submit">  
</form>   
<script>  
function getFormData() {  
  var form = document.getElementById("myForm");  
  var formData = new FormData(form);  
  for (var [key, value] of formData.entries()) {  
    console.log(key, value);  
  }  
}  
</script>  
</body>  
</html>

在这个例子中，FormData对象自动获取表单中的所有数据，并生成一个键值对集合。

2、发送数据

通过AJAX可以将FormData对象发送到服务器。 

<!DOCTYPE html>  
<html>  
<body>  
<form id="myForm">  
  First name: <input type="text" name="fname"><br>  
  Last name: <input type="text" name="lname"><br>  
  <input type="button" onclick="sendFormData()" value="Submit">  
</form>   
<script>  
function sendFormData() {  
  var form = document.getElementById("myForm");  
  var formData = new FormData(form);  
  var xhr = new XMLHttpRequest();  
  xhr.open("POST", "your-server-endpoint", true);  
  xhr.onload = function () {  
    if (xhr.status === 200) {  
      console.log("Data sent and response loaded");  
    } else {  
      console.error("Error sending data");  
    }  
  };  
  xhr.send(formData);  
}  
</script>  
</body>  
</html>

在这个例子中，数据通过AJAX发送到服务器，服务器端可以接收并处理这些数据。

三、通过AJAX请求发送数据

使用AJAX可以异步地将表单数据发送到服务器，而不刷新页面。

1、基本用法

<!DOCTYPE html>  
<html>  
<body>  
<form id="myForm">  
  First name: <input type="text" name="fname"><br>  
  Last name: <input type="text" name="lname"><br>  
  <input type="button" onclick="sendFormData()" value="Submit">  
</form>   
<script>  
function sendFormData() {  
  var xhr = new XMLHttpRequest();  
  var url = "your-server-endpoint";  
  xhr.open("POST", url, true);  
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
  xhr.onreadystatechange = function () {  
    if (xhr.readyState === 4 && xhr.status === 200) {  
      console.log("Data sent and response loaded");  
    } else {  
      console.error("Error sending data");  
    }  
  };  
  var fname = document.getElementsByName("fname")[0].value;  
  var lname = document.getElementsByName("lname")[0].value;  
  var data = "fname=" + fname + "&lname=" + lname;  
  xhr.send(data);  
}  
</script>  
</body>  
</html>

在这个例子中，使用XMLHttpRequest对象发送POST请求，将表单数据编码为URL参数格式发送到服务器。

2、使用Fetch API

Fetch API是现代浏览器中推荐使用的替代XMLHttpRequest的方式。 

<!DOCTYPE html>  
<html>  
<body>  
<form id="myForm">  
  First name: <input type="text" name="fname"><br>  
  Last name: <input type="text" name="lname"><br>  
  <input type="button" onclick="sendFormData()" value="Submit">  
</form>   
<script>  
function sendFormData() {  
  var form = document.getElementById("myForm");  
  var formData = new FormData(form);  
  fetch("your-server-endpoint", {  
    method: "POST",  
    body: formData  
  })  
  .then(response => response.json())  
  .then(data => console.log("Data sent and response loaded:", data))  
  .catch(error => console.error("Error sending data:", error));  
}  
</script>  
</body>  
</html>

在这个例子中，使用Fetch API发送表单数据，代码更加简洁易读。

四、利用第三方库如jQuery

jQuery提供了更方便的方式来操作DOM和发送AJAX请求。

1、基本用法

<!DOCTYPE html>  
<html>  
<head>  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  
</head>  
<body>  
<form id="myForm">  
  First name: <input type="text" name="fname"><br>  
  Last name: <input type="text" name="lname"><br>  
  <input type="button" onclick="sendFormData()" value="Submit">  
</form>   
<script>  
function sendFormData() {  
  var formData = $("#myForm").serialize();  
  $.ajax({  
    type: "POST",  
    url: "your-server-endpoint",  
    data: formData,  
    success: function(response) {  
      console.log("Data sent and response loaded:", response);  
    },  
    error: function(error) {  
      console.error("Error sending data:", error);  
    }  
  });  
}  
</script>  
</body>  
</html>

在这个例子中，使用jQuery的
$.ajax
方法发送表单数据，代码更加简洁，并且处理了成功和错误的回调。

2、获取表单数据

jQuery的
serialize
方法可以将表单数据序列化为URL编码的字符串，适合直接发送。 

<!DOCTYPE html>  
<html>  
<head>  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  
</head>  
<body>  
<form id="myForm">  
  First name: <input type="text" name="fname"><br>  
  Last name: <input type="text" name="lname"><br>  
  <input type="button" onclick="getFormData()" value="Submit">  
</form>   
<script>  
function getFormData() {  
  var formData = $("#myForm").serializeArray();  
  $.each(formData, function(i, field) {  
    console.log(field.name + ": " + field.value);  
  });  
}  
</script>  
</body>  
</html>

在这个例子中，使用
serializeArray
方法获取表单数据，生成一个对象数组，每个对象包含表单字段的名称和值。

总结

获取HTML表单的数据有多种方式，包括使用JavaScript的DOM方法、FormData对象、AJAX请求、以及第三方库如jQuery。每种方法都有其适用的场景和优缺点。使用JavaScript的DOM方法适合初学者、FormData对象适合处理复杂表单、AJAX请求适合异步数据传输、jQuery则提供了更简便的API。选择合适的方法可以提高开发效率和代码的可读性。

相关问答FAQs：

1. 如何使用HTML获得表单的数据？
HTML通过使用表单元素来收集用户输入的数据。用户在表单中输入数据后，可以通过使用JavaScript或后端编程语言来获取表单数据。

2. 如何在HTML中获取表单数据？
要获取HTML表单的数据，可以使用JavaScript的
document.forms
对象来访问表单元素。通过使用表单的
name
属性，可以直接访问表单的各个字段并获取其值。

3. HTML如何通过表单提交数据？
在HTML中，使用

元素来创建一个表单，并使用 等表单元素来收集用户输入的数据。当用户点击提交按钮时，表单会将数据发送到服务器或执行指定的JavaScript代码。可以通过指定 action 属性来指定数据提交的目标URL或JavaScript函数的名称。
热门推荐
© 2023 北京元石科技有限公司 ◎ 京公网安备 11010802042949号