Ajax入门

文章目录

• axios体验
• axios-查询参数
• 常用请求方法
• • 数据提交
• axios错误处理

axios体验

• 引入axios库

• 使用axios语法

  axios({
  	url: '目标资源地址'
  }).then((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概念和axios使用</title>
  </head>
  
  <body>
  <!--
    axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
    省份数据地址：http://hmajax.itheima.net/api/province
  
    目标: 使用axios库, 获取省份列表数据, 展示到页面上
    1. 引入axios库
  -->
  <p class="my-p"></p>
  <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)
          console.log(result.data.list.join('<br>'))
          // 把准备好省份列表，插入到页面
          document.querySelector('.my-p').innerHTML= result.data.list.join('<br>')
      })
  </script>
  </body>
  </html>

• 运行结果
  

axios-查询参数

• 语法：使用axios提供的params选项

  axios({
  	url: '目标资源地址'，
  	params:{
  		参数名:值
  	}
  }).then((result)=>{
  	// 对服务器返回的数据做后续处理
  })

• 注意：axios在运行时把参数名和值，会拼接到url ?参数名=值

---

• demo

  <!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>
  <!--
    axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
    省份数据地址：http://hmajax.itheima.net/api/city
  
    目标: 使用axios库, 获取省份列表数据, 展示到页面上
    1. 引入axios库
  -->
  <p class="my-p"></p>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
      // 2. 使用axios函数
      axios({
          url:'http://hmajax.itheima.net/api/city',
          // 查询参数
          params:{
              pname:'贵州省'
          }
      }).then((result)=>{
          console.log(result.data.list)
          document.querySelector('.my-p').innerHTML=result.data.list.join('<br>')
  
      })
  </script>
  </body>
  </html>

• 运行结果
  

常用请求方法

• 请求方法：对服务器资源，要执行的操作

  请求方法	操作
  GET	获取数据
  POST	提交数据
  PUT	修改数据（全部）
  DELETE	删除数据
  PATCH	修改数据（部分）

数据提交

axios请求配置

• url：请求的URL地址

• method：请求的方法，GET可以省略不写（不区分大小写）

• data：提交的数据

  axios({
  	url: '目标资源地址',
  	method:'请求方法',
  	data:{
  		参数名：值
  	}
  }).then((result)=>{
  	// 对服务器返回的数据做后续处理
  })

axios错误处理

语法：在then方法的后面，通过点语法调用catch方法，传入回调函数并定义形参

axios({
	// 请求选项
}).then(result=>{
	// 处理数据
}).catch(error=>{
	// 处理错误
})