（图片来源网络，侵删）
1. 使用表单（Form）
表单是HTML中用于收集用户输入的一种元素，通过<form>标签，可以创建一个表单，然后使用<input>、<textarea>等标签创建输入框、文本区域等控件，当用户填写完表单并提交后，可以通过JavaScript或者后端服务器来处理这些数据。
示例代码：
<form action="yourserverurl" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username"> <br> <label for="password">密码：</label> <input type="password" id="password" name="password"> <br> <input type="submit" value="提交"> </form>
2. 使用AJAX
AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，与服务器交换数据并更新部分网页的技术，常用的AJAX技术有XMLHttpRequest和Fetch API。
2.1 XMLHttpRequest
XMLHttpRequest是一个旧的API，用于在浏览器和服务器之间异步发送请求和接收响应。
示例代码：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.open("GET", "yourserverurl", true);
xhr.send();
2.2 Fetch API
Fetch API是一个现代的、更简洁的API，用于替换XMLHttpRequest。
示例代码：
fetch("yourserverurl")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
3. 使用WebSockets
WebSockets是一种在单个TCP连接上进行全双工通信的协议，它允许服务器主动向客户端推送数据，而无需客户端发起请求。
示例代码：
var socket = new WebSocket("ws://yourwebsocketserverurl");
socket.onmessage = function(event) {
console.log(event.data);
};
socket.onopen = function(event) {
socket.send("Hello Server!");
};
以上就是前端HTML接收数据的几种常见方式，根据实际需求和场景，可以选择合适的方法来实现。
原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/391160.html
