需通过JavaScript发起HTTP请求获取外部API数据，具体包括：一、用fetch API发GET请求；二、用XMLHttpRequest手动请求；三、用JSONP跨域；四、用Axios库简化流程；五、配本地代理解决CORS。
如果您希望在HTML页面中获取并展示来自外部API的数据，则需要通过JavaScript发起HTTP请求并与后端服务进行数据交互。以下是实现此功能的具体步骤：
一、使用fetch API发起GET请求
fetch是现代浏览器内置的轻量级网络请求接口，支持Promise语法，适合在HTML中直接调用外部RESTful API获取JSON数据。
1、在HTML文件的
底部添加标签，确保DOM已加载完成。
2、使用fetch()函数传入API的URL地址，例如”https://jsonplaceholder.typicode.com/posts/1″。
立即学习“前端免费学习笔记（深入）”；
3、调用.then()方法处理响应，使用response.json()解析返回的JSON数据。
4、在第二个.then()中将获取到的数据插入到指定HTML元素内，例如document.getElementById(“result”).innerHTML = data.title;
5、使用.catch()捕获网络错误或解析异常，并在控制台输出Error: 请检查API地址是否可访问且跨域策略是否允许。
二、使用XMLHttpRequest手动发送请求
XMLHttpRequest是较早的浏览器原生API，兼容性更广，适用于需支持旧版IE浏览器的场景，其执行过程为同步或异步回调模式。
1、创建XMLHttpRequest实例：const xhr = new XMLHttpRequest();
2、调用open()方法配置请求方式与URL，例如xhr.open(“GET”, “https://api.example.com/data”, true);
3、设置onload事件监听器，在状态码为200时读取xhr.responseText并解析为JSON对象。
4、调用send()方法发出请求。
5、在onerror事件中打印错误信息，确保请求头未被CORS策略拦截且服务器返回了有效响应体。
三、通过动态创建script标签实现JSONP跨域（仅限支持JSONP的API）
JSONP利用标签不受同源策略限制的特性，通过回调函数接收服务端返回的可执行JS代码，适用于仅提供JSONP接口的老系统。
1、定义全局回调函数，例如window.handleData = function(data) { document.getElementById(“output”).textContent = data.message; };
2、创建script元素，设置src属性为API地址并附带callback参数，例如”https://legacy-api.com/data?callback=handleData”。
3、将script元素append到document.head中触发加载。
4、确保API响应格式为handleData({“message”: “success”})，否则浏览器将报错ReferenceError且无数据渲染。
四、使用第三方库Axios简化请求流程
Axios是一个基于Promise的HTTP客户端，提供统一的请求/响应拦截、自动JSON转换等功能，需通过CDN引入后方可使用。
1、在HTML的中添加Axios CDN链接：
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”>
2、调用axios.get()方法传入目标API URL。
3、在.then()中解构response.data获取实际数据内容。
4、使用.catch()捕获错误，并检查是否出现Network Error或404 Not Found，确认API服务处于运行状态。
五、配置本地开发代理规避CORS限制
当本地HTML文件通过file://协议直接打开时，浏览器会阻止所有跨域请求；此时可通过启动简易HTTP服务器并配置代理规则绕过限制。
1、使用Python启动本地服务器：python3 -m http.server 8000（Python3）或python -m SimpleHTTPServer 8000（Python2）。
2、将HTML文件放入该服务器根目录下，通过http://localhost:8000/your-page.html访问。
3、若仍遇CORS问题，可在服务器端响应头中添加Access-Control-Allow-Origin: *。
4、确保前端请求地址为相对路径或同域地址，避免触发浏览器的Origin mismatch校验失败。
以上就是HTML如何接入外部API_数据交互实现步骤【方案】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1607008.html
微信扫一扫 
支付宝扫一扫 
