html前端与后端数据交互的八种常用方式：一、表单提交；二、xmlhttprequest异步请求；三、fetch api；四、websocket双向实时连接；五、jsonp跨域请求；六、formdata上传文件；七、隐藏iframe无刷新提交；八、server-sent events服务器推送。
如果您在HTML页面中需要获取或提交数据到服务器，则必须通过特定机制与后端建立通信。以下是HTML前端与后端进行数据交互的常用方式：
一、使用表单（form）提交数据
表单是HTML原生支持的前后端交互方式，通过method属性指定请求方法，action属性指定后端接口地址，浏览器会自动构造HTTP请求并跳转或刷新页面。
1、在HTML中编写form标签，设置method为"GET"或"POST"。
2、在form内添加input、textarea等表单控件，并为每个控件设置name属性。
立即学习“前端免费学习笔记（深入）”；
3、设置form的action属性为后端接收数据的URL路径，例如"/login"。
4、用户点击submit按钮后，浏览器将所有带name属性的控件值按编码规则组装并发送至后端。
二、使用XMLHttpRequest（XHR）发起异步请求
XMLHttpRequest对象允许JavaScript在不重新加载页面的情况下与服务器交换数据，实现局部更新和动态交互。
1、创建XMLHttpRequest实例：const xhr = new XMLHttpRequest();
2、调用open()方法配置请求方式、URL及是否异步，例如xhr.open("POST", "/api/data", true);
3、设置请求头（如需发送JSON）：xhr.setRequestHeader("Content-Type", "application/json");
4、绑定onload事件处理响应：xhr.onload = function() { if (xhr.status === 200) { console.log(xhr.responseText); } };
5、调用send()方法发送请求体，可传入字符串、FormData或null。
三、使用fetch API发送请求
fetch是现代浏览器提供的基于Promise的网络请求接口，语法简洁，支持async/await，替代XHR成为主流选择。
1、调用fetch()函数并传入目标URL，例如fetch("/api/users");
2、使用then()链式处理Response对象，调用response.json()或response.text()解析响应体。
3、若需携带数据，传入配置对象：fetch("/api/save", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: "test" }) });
4、捕获网络异常需显式检查response.ok，并用try/catch包裹await调用。
四、使用WebSocket建立双向实时连接
WebSocket协议允许客户端与服务器之间建立持久化全双工通信通道，适用于聊天、实时通知、协同编辑等场景。
1、创建WebSocket实例：const ws = new WebSocket("wss://example.com/chat");
2、监听open事件确认连接建立成功：ws.onopen = () => { ws.send(JSON.stringify({ type: "join", user: "alice" })); };
3、监听message事件接收服务器推送的数据：ws.onmessage = (event) => { console.log("收到：", event.data); };
4、调用ws.send()方法向服务器发送文本或二进制数据。
五、通过动态创建script标签实现JSONP跨域请求
JSONP利用script标签不受同源策略限制的特性，通过回调函数接收服务端返回的可执行JS代码，仅适用于GET请求且需后端配合。
1、定义全局回调函数，例如window.handleUserData = function(data) { console.log(data); };
2、创建script元素，设置src属性为后端接口URL并附带callback参数，例如"https://api.example.com/users?callback=handleUserData";
3、将script元素插入document.head或document.body中触发加载。
4、后端响应内容必须为：handleUserData({"id": 1, "name": "Tom"});
六、使用FormData对象上传文件与表单数据
FormData提供了一种更便捷的方式组织键值对数据，尤其适合包含文件输入的混合表单提交，可直接传递给fetch或XHR。
1、创建FormData实例：const formData = new FormData();
2、调用append()方法添加字段，例如formData.append("username", "admin");
3、获取文件输入元素的files[0]，并以相同字段名追加：formData.append("avatar", fileInput.files[0]);
4、将formData作为fetch的body参数发送，此时请求头Content-Type由浏览器自动设置为multipart/form-data。
七、嵌入隐藏iframe实现无刷新表单提交
通过将表单target属性指向隐藏iframe，可在不跳转页面的前提下接收后端响应，常用于传统文件上传兼容方案。
1、在HTML中添加一个display:none的iframe，设置id和name属性一致，例如。
2、设置form元素的target属性为该iframe的name值：form.target = "uploadFrame";
3、监听iframe的load事件，在事件处理函数中读取iframe.contentDocument.body.innerHTML获取响应内容。
4、确保后端返回HTML格式响应，且包含可被JavaScript安全解析的有效结构。
八、通过Server-Sent Events（SSE）接收服务器单向推送
SSE是一种基于HTTP的轻量级服务器向客户端推送事件的技术，适用于实时日志、股票行情等无需客户端频繁请求的场景。
1、创建EventSource对象：const eventSource = new EventSource("/api/events");
2、监听message事件处理默认消息：eventSource.onmessage = (e) => { console.log("数据：", e.data); };
3、监听自定义事件类型：eventSource.addEventListener("update", (e) => { console.log("更新：", e.data); });
4、后端需返回Content-Type为text/event-stream的响应，并按规范格式输出data:、event:、id:等字段。
