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('
    '
    )) // 把准备好省份列表,插入到页面 document.querySelector('.my-p').innerHTML= result.data.list.join('
    '
    ) }) </script> </body> </html>
  • 运行结果
    Ajax入门_第1张图片

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('
    '
    ) }) </script> </body> </html>
  • 运行结果
    Ajax入门_第2张图片

常用请求方法

  • 请求方法:对服务器资源,要执行的操作
    请求方法 操作
    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=>{
	// 处理错误
})

你可能感兴趣的:(JavaScript,ajax,前端)