html-css-js使用axios和ajax获取接口并携带请求头+获取输入框或选择器内容
warning:
这篇文章距离上次修改已过432天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Axios Example</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function fetchData() {
const inputValue = document.getElementById('myInput').value;
const selectValue = document.getElementById('mySelect').value;
const headers = {
'Authorization': 'Bearer ' + inputValue,
'Another-Header': selectValue
};
axios.get('https://api.example.com/data', { headers: headers })
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
}
</script>
</head>
<body>
<input type="text" id="myInput" placeholder="Enter token">
<select id="mySelect">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
</select>
<button onclick="fetchData()">Fetch Data</button>
</body>
</html>这段代码使用Axios库来发送一个GET请求到指定的接口，并携带了从输入框和下拉选择器中获取的数据作为请求头。当用户点击按钮时，fetchData函数会被触发，并发送请求。请求成功后，响应数据会被打印到控制台，失败时会打印错误信息。
评论已关闭