ajax实例html
时间: 2024-03-26 22:32:16 浏览: 11
当我们需要在网页上实现异步加载数据或者与服务器进行数据交互时,可以使用Ajax(Asynchronous JavaScript and XML)技术。下面是一个简单的Ajax实例的HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Ajax Example</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
function getData() {
axios.get('https://api.example.com/data')
.then(function (response) {
// 处理返回的数据
var data = response.data;
document.getElementById('result').innerHTML = data;
})
.catch(function (error) {
console.log(error);
});
}
</script>
</head>
<body>
<button onclick="getData()">获取数据</button>
<div id="result"></div>
</body>
</html>
```
在这个例子中,我们使用了Axios库来发送Ajax请求。当点击"获取数据"按钮时,会调用`getData()`函数。该函数使用Axios发送一个GET请求到`https://api.example.com/data`,并在请求成功后将返回的数据显示在id为"result"的div元素中。