2024-1-23AJAX的概念

GG / 2024-01-23 / 原文

AJAX的概念
- 小知识点箭头函数
- AJAX的作用
- axios的使用

AJAX的概念

简单可以理解为想指定的url获取指定的数据。

小知识点箭头函数

箭头函数是一种新的函数语法，旨在提供一种更简洁的方式来编写函数。

它与传统的function相比比较容易

传统函数格式

var sum = function(a, b) {
  return a + b;
};

箭头函数格式

const sum = (a, b) => a + b;

AJAX的作用

让浏览器和服务器之间通信，动态数据交互

axios的使用

首先需要引入axios库

代码如下

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

然后就是使用

			axios({
				url:'目标资源地址'
			}).then((result)=>{
				//对服务器返回的数据做后续处理（这里的result就是服务器返回的数据）
			})

例子如下

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 这个不是很重要的 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0"><!--这个作用不大-->
		<title>AJAX概念</title>
	</head>
	<body>
		<p class="my-p"></p>
		<!-- 这里将问题 -->
		<!-- 1.引入axios库 -->
		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
		<script>
			// 2.使用axios函数
			axios({
				url: "http://hmajax.itheima.net/api/province"
			}).then(result =>{
				console.log(result)
				// 好习惯：多打印，确认属性性名
				console.log(result.data.list.join('<br>'))
				// 把准备好省份列表，插入到页面
				document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')
			})

		</script>
	</body>
</html>

结果如图