请求方式参数总结

最新推荐文章于 2024-04-23 16:26:38 发布

小叶_01

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量1.7k

点赞数

分类专栏： js+ts 文章标签：前端

本文链接：https://blog.csdn.net/qq_38799387/article/details/126398530

版权

js+ts 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

请求方式参数总结

HTTP有八大请求
常用的请求方式有4个：
GET 查
POST 增
PUT 改
DELETE 删
常用的请求参数有三种：
query 查询字符串参数
params
body 请求体参数

备注：

形如： key=value&key=value的结构，叫做【urlencoded编码】
GET 不能发 body 参数
body 参数的类型：

    data: {name: '老刘', age: '18', sex: '女'} //data的值如果是对象，那么请求参数自动使用json编码
    data: 'name=老刘&age=18&sex=女'   // data的值如果是字符串，那么请求参数自动使用urlencoded编码

从理论上说，一次性请求三种参数，可以同时通过三种形式携带，但是一般不这么做
有请求体的请求（POST PUT DELETE），一般都通过请求体携带数据

<body>
  <button id='btn1'>按钮1--发送GET请求--不携带参数</button> <br/><br/>
  <button id='btn2'>按钮2--发送GET请求--携带query参数</button> <br/><br/>
  <button id='btn3'>按钮3--发送GET请求--携带params参数</button> <br/><br/><br/><br/>

  <button id='btn4'>按钮4--发送POST请求--携带query参数</button> <br/><br/>
  <button id='btn5'>按钮5--发送POST请求--携带params参数</button> <br/><br/>
  <button id='btn6'>按钮6--发送POST请求--携带请求体参数</button> <br/><br/><br/><br/>

  <button id='btn7'>按钮7--发送POST请求--携带query\params\请求体参数</button> <br/><br/>

  <script type="text/javascript">
    const btn1 = document.getElementById('btn1')
    const btn2 = document.getElementById('btn2')
    const btn3 = document.getElementById('btn3')
    const btn4 = document.getElementById('btn4')
    const btn5 = document.getElementById('btn5')
    const btn6 = document.getElementById('btn6')
    const btn7 = document.getElementById('btn7')

    btn1.onclick = ()=>{
      // axios发送GET请求--不带参数--完整写法
      /* 
      axios({
        url:'http://localhost:8080/test1'
      }).then(
        response => {console.log('请求成功了',response.data)},
        error => {console.log('请求失败了',error)}
        )
      */

      // axios发送GET请求--不带参数--精简写法
      /* 
      axios.get('http://localhost:8080/test1').then(
        response => {console.log('请求成功了',response.data)},
        error => {console.log('请求失败了',error)}
      ) */
    }
    
    btn2.onclick = ()=>{
      // axios发送GET请求--带query参数--完整写法
      /* 
      axios({
        // url:'http://localhost:8080/test2?name=老刘&age=18&sex=女'
        url:'http://localhost:8080/test2',
        params:{
          name: '老刘', age: '18', sex: '女' // 此处写的是params，但携带的是query参数
        }
      }).then(
        response => {console.log('axios请求成功了',response.data)},
        error => {console.log('axios请求失败了',error)}
        )
       */

      // axios发送GET请求--带query参数--精简写法
      /* 
      axios.get('http://localhost:8080/test2',{ 
          params:{ name: '老刘', age: '18', sex: '女'}
        }).then(
        response => {console.log('请求成功了',response.data)},
        error => {console.log('请求失败了',error)}
      ) */
    }

    btn3.onclick = ()=>{
      // axios发送GET请求--带params参数--完整写法
      /* 
      axios({
        url:'http://localhost:8080/test3/老刘/18/女',
      }).then(
        response => {console.log('axios请求成功了',response.data)},
        error => {console.log('axios请求失败了',error)}
        )
       */

      // axios发送GET请求--带params参数--精简写法
      
      axios.get('http://localhost:8080/test3/老刘/18/女').then(
        response => {console.log('请求成功了',response.data)},
        error => {console.log('请求失败了',error)}
      )
    }

    btn4.onclick = ()=>{
      // axios发送POST请求--带query参数--完整写法
      /* 
      axios({
        method:'POST',
        url:'http://localhost:8080/test4',
        params:{
          name: '老刘', age: '18', sex: '女' // 此处写的是params，但携带的是query参数
        }
      }).then(
        response => {console.log('axios请求成功了',response.data)},
        error => {console.log('axios请求失败了',error)}
        )
       */

      // axios发送POST请求--带query参数--精简写法
      
      axios.post('http://localhost:8080/test4',{},{
        params:{ name: '老刘', age: '18', sex: '女'} // 此处写的是params，但携带的是query参数 
      }).then(
        response => {console.log('请求成功了',response.data)},
        error => {console.log('请求失败了',error)}
      )
    }
    
    btn5.onclick = ()=>{
      // axios发送POST请求--带params参数--完整写法
      /* 
      axios({
        method:'POST',
        url:'http://localhost:8080/test5/老刘/18/女'
      }).then(
        response => {console.log('axios请求成功了',response.data)},
        error => {console.log('axios请求失败了',error)}
        )
       */

      // axios发送POST请求--带params参数--精简写法
      
      axios.post('http://localhost:8080/test5/老刘/18/女').then(
        response => {console.log('请求成功了',response.data)},
        error => {console.log('请求失败了',error)}
      )

    }
    
    btn6.onclick = ()=>{
      // axios发送POST请求--带请求体参数--完整写法
      /* 
      axios({
        method:'POST',
        url:'http://localhost:8080/test6',
        // data: {name: '老刘', age: '18', sex: '女'} //data的值如果是对象，那么请求参数自动使用json编码
        data: 'name=老刘&age=18&sex=女'   // data的值如果是字符串，那么请求参数自动使用urlencoded编码
      }).then(
        response => {console.log('axios请求成功了',response.data)},
        error => {console.log('axios请求失败了',error)}
        )
       */

      // axios发送POST请求--带请求体参数--精简写法
      
      axios.post('http://localhost:8080/test6',
      {name: '老刘', age: '18', sex: '女'} 
      ).then(
        response => {console.log('请求成功了',response.data)},
        error => {console.log('请求失败了',error)}
      )

    }
    
    btn7.onclick = ()=>{
      // axios发送POST请求--带query\params\请求体参数--完整写法
      
      axios({
        method:'POST',
        url:'http://localhost:8080/test7/18',
        params:{name:'老刘'},
        data: 'sex=女'
      }).then(
        response => {console.log('axios请求成功了',response.data)},
        error => {console.log('axios请求失败了',error)}
        )
      

      // axios发送POST请求--带query\params\请求体参数--精简写法
      
      /* axios.post('http://localhost:8080/test6',
      {name: '老刘', age: '18', sex: '女'} 
      ).then(
        response => {console.log('请求成功了',response.data)},
        error => {console.log('请求失败了',error)}
      ) */

    }

  </script>
</body>