在HTML页面中调用API接口，核心是通过JavaScript发起网络请求，获取接口返回的数据后再渲染到页面中，实现前后端数据交互的效果。整个过程不需要在HTML标签中直接嵌入接口逻辑，而是通过脚本代码完成请求和数据处理。
常用API调用方式
1. 使用XMLHttpRequest
XMLHttpRequest是早期浏览器支持的异步请求对象，兼容性较好，基本用法如下：
// 创建XMLHttpRequest实例
const xhr = new XMLHttpRequest();
// 配置请求方法和地址，这里使用示例地址，实际替换为你的API地址
xhr.open('GET', 'https://ipipp.com/api/user/list');
// 监听请求状态变化
xhr.onreadystatechange = function() {
// readyState为4表示请求完成，status为200表示请求成功
if (xhr.readyState === 4 && xhr.status === 200) {
// 将返回的JSON字符串转为对象
const res = JSON.parse(xhr.responseText);
console.log('接口返回数据：', res);
// 这里可以将数据渲染到页面中
}
};
// 发送请求
xhr.send();
2. 使用fetch API
fetch是现代浏览器原生支持的请求API，语法更简洁，基于Promise设计，使用起来更方便：
// 发起GET请求
fetch('https://ipipp.com/api/user/list')
.then(response => {
// 先判断响应状态是否正常
if (!response.ok) {
throw new Error('请求失败，状态码：' + response.status);
}
// 将响应转为JSON格式
return response.json();
})
.then(data => {
console.log('接口返回数据：', data);
// 处理数据渲染逻辑
})
.catch(error => {
console.error('请求出错：', error);
});
3. 使用axios库
axios是常用的第三方请求库，功能更丰富，支持拦截器、请求取消等特性，需要先引入axios库：
<!-- 在HTML中引入axios库 --> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
引入后调用API的代码如下：
// GET请求示例
axios.get('https://ipipp.com/api/user/list')
.then(response => {
console.log('接口返回数据：', response.data);
})
.catch(error => {
console.error('请求出错：', error);
});
// POST请求示例，传递参数
axios.post('https://ipipp.com/api/user/add', {
name: '张三',
age: 20
})
.then(response => {
console.log('添加成功，返回数据：', response.data);
})
.catch(error => {
console.error('添加失败：', error);
});
请求参数传递方式
不同的请求方法参数传递方式不同：
- GET请求：参数一般拼接在URL后面，格式为
?key1=value1&key2=value2 - POST请求：参数一般放在请求体中，需要根据接口要求的格式传递，常见的有JSON格式、表单格式等
fetch发送POST请求传递JSON参数的示例：
fetch('https://ipipp.com/api/user/add', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: '李四',
age: 22
})
})
.then(response => response.json())
.then(data => {
console.log('请求结果：', data);
});
跨域问题处理
如果调用的API接口和当前HTML页面的域名、端口、协议不一致，会遇到跨域问题，常见的解决方式有：
- 后端接口配置CORS（跨域资源共享），允许前端域名的请求
- 使用JSONP方式，仅支持GET请求，需要后端配合返回指定格式的数据
- 开发环境下可以通过代理服务器转发请求，避免跨域
注意事项
- API地址不要写错，注意请求方法是GET还是POST，和接口要求保持一致
- 处理请求时要考虑失败情况，比如网络异常、接口返回错误状态码等，做好异常捕获
- 敏感接口不要直接在前端暴露密钥等敏感信息，这类逻辑应该放在后端处理
- 调用接口的代码一般放在
<script>标签中，或者单独的js文件中，再通过<script>标签引入到HTML页面
HTMLAPI调用JavaScript异步请求fetch修改时间：2026-07-01 20:27:30