HTML页面与网络API交互有五种常用方法：一、fetch() API；二、XMLHttpRequest；三、axios库；四、处理CORS限制；五、表单提交。每种方法适用于不同场景，如现代开发首选fetch，旧浏览器兼容用XHR，简化请求用axios，跨域需服务端配置CORS，简单提交可用原生form。
如果您的HTML页面需要从远程服务器获取数据或向其提交信息，则必须通过JavaScript发起网络请求。以下是实现HTML页面与网络API交互的几种常用方法：
一、使用fetch() API发送HTTP请求
fetch() 是现代浏览器内置的原生API，用于发起异步网络请求，支持GET、POST等方法，返回Promise对象便于链式处理。
1、在HTML文件的标签内编写JavaScript代码。
2、调用fetch()函数并传入目标API的URL，例如”https://jsonplaceholder.typicode.com/posts/1″。
立即学习“前端免费学习笔记（深入）”；
3、使用.then()方法处理响应，先调用response.json()解析JSON数据。
4、在第二个.then()中操作解析后的数据，例如将标题插入到id为”post-title”的元素中。
5、使用.catch()捕获网络错误或解析异常，并在控制台输出TypeError: Failed to fetch等提示。
二、使用XMLHttpRequest发送传统AJAX请求
XMLHttpRequest（XHR）是较早的浏览器API，兼容性更广，适用于需支持旧版IE的场景，支持手动设置请求头与监听进度事件。
1、创建XMLHttpRequest实例：const xhr = new XMLHttpRequest();
2、调用xhr.open(“GET”, “https://api.example.com/data”, true);指定请求方式、URL和是否异步。
3、设置onload事件处理器，在xhr.status为200时读取xhr.responseText。
4、调用xhr.send()发起请求；若为POST请求，需先设置xhr.setRequestHeader(“Content-Type”, “application/json”)。
5、在onerror事件中判断xhr.status === 0，表示网络连接中断或跨域被阻止。
三、使用axios库发起封装请求
axios是一个基于Promise的第三方HTTP客户端，自动转换JSON数据，支持请求/响应拦截器和取消请求功能，需通过CDN引入。
1、在HTML的
中添加script标签引入axios：。
2、调用axios.get()方法获取数据，例如axios.get(“https://httpbin.org/get?name=test”)。
3、使用.then()接收响应对象，访问response.data获取服务端返回主体内容。
4、使用axios.post()提交数据，传入URL和数据对象，例如axios.post(“/api/submit”, { user: “admin” })。
5、当响应状态码非2xx时，catch块中可捕获Error对象，其message属性常为Network Error或timeout of 0ms exceeded。
四、处理跨域资源共享（CORS）限制
浏览器默认阻止前端脚本向非同源域名发起请求，服务端需设置Access-Control-Allow-Origin响应头才能允许跨域访问。
1、检查浏览器开发者工具Network面板中请求的Response Headers，确认是否存在Access-Control-Allow-Origin字段。
2、若该字段缺失或值不匹配当前页面域名，请求将被拒绝，控制台显示Blocked by CORS policy。
3、临时调试时可在Chrome启动命令中添加–disable-web-security参数（仅限本地测试）。
4、后端服务应明确设置Access-Control-Allow-Origin: * 或具体域名，并在预检请求（OPTIONS）中返回对应头。
5、避免在生产环境使用*通配符配合凭证（如cookies），否则浏览器会拒绝请求并提示The value of the ‘Access-Control-Allow-Origin’ header must not be the wildcard ‘*’。
五、通过表单提交触发页面级网络交互
利用HTML原生form元素的action和method属性，无需JavaScript即可完成GET/POST请求，适用于简单数据提交与页面跳转场景。
1、编写form标签，设置method属性为”GET”或”POST”，action属性为目标API路径或后端处理地址。
2、在form内添加input、textarea等表单控件，并设置name属性，例如。
3、点击提交按钮后，浏览器自动构造请求并发送，服务端响应将直接渲染为新页面。
4、若action指向RESTful接口且期望返回JSON，需服务端设置Content-Type为application/json，否则浏览器可能尝试下载响应体。
5、当服务端返回HTTP 400错误时，浏览器不会自动报错，需在服务端响应中嵌入HTML错误提示，或通过JavaScript监听submit事件并调用event.preventDefault()后改用fetch处理，以捕获400 Bad Request状态。
以上就是html如何联网_HTML页面通过API与网络进行交互【交互】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1604449.html
微信扫一扫 
支付宝扫一扫 
