html5怎么调接口_html5用Ajax或Fetch API调用后端接口传数据【调用】

---

HTML5页面需用JavaScript发起网络请求与后端交互，主流方式包括XMLHttpRequest（兼容旧浏览器，需手动设头、处理状态）和Fetch API（现代标准，基于Promise，语法简洁）。

如果您在HTML5页面中需要与后端服务器进行数据交互，则必须通过JavaScript发起网络请求。以下是使用Ajax（XMLHttpRequest）和Fetch API两种主流方式调用后端接口并传递数据的具体操作步骤：

一、使用XMLHttpRequest发送POST请求

XMLHttpRequest是传统且兼容性极强的原生API，适用于需支持旧版浏览器的场景。它允许手动设置请求头、处理状态码，并支持同步或异步通信。

1、创建XMLHttpRequest实例对象。

2、调用open()方法指定请求方式（如POST）、目标URL及是否异步（通常为true）。

3、设置Content-Type请求头为application/json，确保后端能正确解析JSON数据。

4、将待发送的数据通过JSON.stringify()序列化为字符串。

5、调用send()方法传入序列化后的数据。

6、监听onload事件，在status为200时读取responseText或response属性获取响应内容。

二、使用Fetch API发送GET请求

Fetch API是现代浏览器推荐的标准接口，基于Promise设计，语法简洁，天然支持异步处理。GET请求通常用于获取资源，参数通过URL查询字符串传递。

1、构造包含查询参数的完整URL，例如"https://api.example.com/data?id=123&type=user"。

2、调用fetch()函数并传入该URL。

3、使用then()链式处理响应，先调用response.json()解析JSON格式响应体。

4、在后续then()中处理解析后的数据对象。

5、使用catch()捕获网络错误或解析异常，避免未处理的Promise rejection。

三、使用Fetch API发送带JSON数据的POST请求

Fetch默认不发送Cookie且不会自动设置Content-Type，因此需显式配置请求选项以匹配后端期望的格式。发送结构化数据时应确保头部与载荷一致。

1、定义待提交的数据对象，例如{username: "admin", password: "123456"}。

2、将该对象通过JSON.stringify()转为字符串。

3、配置init对象，设置method为"POST"，headers中包含"Content-Type": "application/json"。

4、将序列化后的字符串赋值给body字段。

5、调用fetch(URL, init)发起请求。

6、依次调用response.json()和后续then()处理返回结果。

四、使用FormData上传表单数据

当需提交文件或混合类型表单（如文本字段+文件输入）时，FormData接口可自动编码数据并设置正确的multipart/form-data请求头，无需手动构造边界符。

1、创建新的FormData实例。

2、调用append()方法逐个添加键值对，例如form.append("name", "张三")。

3、若存在文件输入元素，获取其files[0]并append进FormData，键名与后端约定一致。

4、调用fetch()时直接将FormData实例作为body传入，此时不可设置Content-Type头，浏览器会自动生成带boundary的正确头信息。

5、响应处理方式与其他Fetch请求相同。

五、处理跨域请求与CORS预检

当前端页面协议、域名或端口与后端不一致时，浏览器会触发CORS机制。简单请求（如GET/POST且Content-Type为text/plain、application/x-www-form-urlencoded或multipart/form-data）可能免预检；含自定义头或application/json的POST则触发OPTIONS预检。

1、确保后端响应头中包含Access-Control-Allow-Origin，其值需匹配前端源或设为*（仅限无凭证请求）。

2、若需携带Cookie或认证头，前端fetch调用中必须设置credentials: "include"，且后端需返回Access-Control-Allow-Credentials: true。

3、对于预检失败的情况，检查后端是否正确响应OPTIONS请求，包括Access-Control-Allow-Methods、Access-Control-Allow-Headers等头字段。

4、确认请求中未出现浏览器禁止的头字段，例如Host、Content-Length等。

# javascript  # word  # java  # html  # js  # 前端  # json  # ajax  # html5  # cookie  # 编码 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 网络优化76771 】 【 技术知识130152 】 【 IDC云计算60162 】 【 营销推广131313 】 【 AI优化88182 】 【 百度推广37138 】 【 网站推荐60173 】 【 精选阅读31334 】

相关推荐： c# await 一个已经完成的Task会发生什么  如何在 Go 中正确测试带 Cookie 的 HTTP 请求  Win11怎么设置麦克风权限_允许应用访问Win11麦克风【详解】  如何在 Go 中正确初始化结构体中的 map 字段  Python抽象类与接口设计_规范说明【指导】  Win11怎么关闭贴靠布局_Win11禁用窗口最大化时的布局菜单  Windows7如何安装系统镜像_Windows7系统安装教程【步骤】  Win11怎么查看显卡显存_查询Win11显卡详细参数方法【步骤】  Python 中将 ISO 8601 时间戳转换为日期并计算日期差值的完整教程  Mac如何修改Hosts文件？（本地开发与屏蔽网站）  C#如何使用XPathNavigator高效查询XML  用Python构建微服务架构实践_FastAPI与Django对比详解  如何在Golang中操作嵌套切片指针_Golang多维slice修改  C#怎么创建控制台应用 C# Console App项目创建方法  如何在Golang中配置代码格式化工具_使用gofmt和goimports  Win11如何设置自动关机 Win11定时关机命令使用教程【技巧】  Golang如何避免指针逃逸_Golang逃逸分析与堆栈优化策略  LINUX怎么查看进程_LINUX ps命令查看运行服务  Win10怎么创建桌面快捷方式 Win10为应用创建快捷方式【步骤】  Windows如何使用注册表查找和删除项？（regedit教程）  Mac上的iMovie如何剪辑视频？（新手入门教程）  Win11怎么退出微软账户_切换Win11为本地账户登录方法【详解】  Windows家庭版如何开启组策略(gpedit.msc)？（安装方法）  如何更改Windows资源管理器的默认启动位置？（快速访问/此电脑）  php订单日志怎么记录物流_php记录订单物流变更日志指南【指南】  如何在Golang中验证模块完整性_Golanggo.sum校验与安全实践  Windows10如何更改系统字体大小_Win10辅助功能文本缩放设置  Win11如何设置系统声音_Win11系统声音调整教程【攻略】  MAC怎么一键隐藏桌面所有图标_MAC极简模式切换与终端指令【方法】  PHP 中如何在函数内持久化修改引用变量的指向  如何使用Golang log记录不同级别日志_Golang log Println与Fatal示例  如何使用Golang实现容器安全扫描_Golang Docker镜像漏洞检测方法  Go语言中CookieJar的持久化机制解析：内存存储与自定义持久化方案  如何使用Golang匿名函数_快速定义临时函数逻辑  Win11怎么关闭小组件_Win11禁用任务栏天气与小组件方法【设置】  Win11怎么更改系统语言_Win11中文语言包下载与安装【指南】  如何使用正则表达式批量替换重复的 *- 模式为固定字符串  php条件判断怎么写_ifelse和switchcase的使用区别【对比】  Python网络异常模拟_测试说明【指导】  Python迭代器生成器进阶教程_节省内存与懒加载实战  Win11蓝牙开关不见了怎么办_Win11蓝牙驱动丢失修复教程【方法】  c++ try_emplace用法_c++ map高效插入数据  Win11怎么忘记WiFi网络_Win11删除已保存无线连接【教程】  Mac如何查看电池健康百分比_Mac系统信息电源检测  PythonPandas数据分析项目教程_时间序列透视表应用  C++中的constexpr和const有什么区别？（编译期常量）  Windows11怎样开启游戏模式_Windows11游戏模式开启攻略【方法】  c++中如何对数组进行排序_c++数组排序算法汇总  Win11怎么设置开机密码_Windows11账户登录选项PIN码  如何从 Go 的 map[string]interface{} 中安全获取值 

 2025-12-30