在HTML中直接调用HTTP接口通常不是一个好主意,因为这样做会涉及到跨域请求问题(CORS),但如果你需要进行这样的操作,可以使用以下几种方法:
-
使用JavaScript内置的
XMLHttpRequest
或fetch
API。 -
使用HTML的
<iframe>
元素和window.postMessage方法进行跨域通信。 -
使用WebSocket代理服务器来转发请求。
以下是使用fetch
API的示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTTP Interface Call</title>
<script>
function callApi() {
fetch('https://api.example.com/data', {
method: 'GET', // 或者 'POST'
headers: {
'Content-Type': 'application/json'
// 其他需要的头部信息
},
// 如果是POST请求,需要提供body
// body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => {
console.log(data);
// 处理返回的数据
})
.catch(error => console.error('Error:', error));
}
</script>
</head>
<body>
<button οnclick="callApi()">Call API</button>
</body>
</html>