axios发送ajax请求

最新推荐文章于 2024-04-15 15:32:25 发布

2333!!!!!

最新推荐文章于 2024-04-15 15:32:25 发布

阅读量100

点赞数

分类专栏： ajax学习文章标签： javascript 前端 ajax

本文链接：https://blog.csdn.net/weixin_46564011/article/details/123318759

版权

ajax学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn1">简易get请求</button> <button id="btn2">简易POST请求</button><button id="btn3">普通AJAX请求</button>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.25.0/axios.min.js"></script>
<script>
  let btn1=document.getElementById("btn1");
  let btn2=document.getElementById("btn2");
  let btn3=document.getElementById("btn3");
  btn1.οnclick=function(){
      //axios.defaults.baseURL("http://localhost:8000");这个设置了之后下面的url 只填这个就好了'/server'
      //axios是promise的异步方法所以只有三个参数 url 请求体 配置(headers之类的,url参数)
      //因为get方法没有请求体所以只有两个参数 url {配置(headers之类的,url参数}
      axios.get('http://localhost:8000/server', {
          params:{
              a:10,
              b:100
          },
          headers:{
              name:"it"
          }
      }).then(response=>{
            console.log(response);
      },err=>{
          console.log(err)
      });
  }
  btn2.οnclick=function(){
      axios.post('http://localhost:8000/server',{
          data:{
              name:"请求体"
          }
      },
          {
              params:{
                  a:10,
                  b:100
              },
              headers:{
                  name:"it"
              }
          }
      )
  }
  btn3.οnclick=function(){
      axios({//axios的请求方式就是类似于请求报文
          url:'http://localhost:8000/server',
          method:'post',
        //最开始写url 请求方法 请求参数的请求行
          //下来就是请求头
          params:{
              a:10,
              b:100
          },
          headers:{
              name:"it"
          },
          //完了就是请求体就是数据
          data:{
              name:"请求体"
          }
      })
  }
</script>
</body>
</html>

2333!!!!!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
axios发送ajax请求

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><button id="btn1">简易get请求</button> <button id="btn2">简易POST请求</button><bu.
复制链接

扫一扫