Ajax使用XMLHttpRequest请求数据

揭开画皮

于 2024-10-23 11:36:58 发布

阅读量166

点赞数 2

文章标签： ajax 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_75166176/article/details/143179974

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="content">

		</div>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<script>
			// 1.创建 XMLHttpRequet
			const xhr = new XMLHttpRequest()
			// 2.配置请求方法和请求URL地址
			xhr.open('GET', 'http://ajax-api.itheima.net/api/province')
			// 3.监听 loadend 事件，处理服务器的响应体
			xhr.addEventListener('loadend', () => {
				//响应体是JSON格式的
				console.log(xhr.response)
				//将获取到的JSON格式的数据，转为对象
				const data = JSON.parse(xhr.response)
				console.log(data.data)
				// 将数据打印到网页上
				let content = document.querySelector(".content")
				const dataList = data.data
				let theList = dataList.map(province =>
					`<div>${province}</div>`).join(" ")
				content.innerHTML = theList
			})
			// 4.发送请求
			xhr.send()
		</script>
	</body>
</html>