• 请求方式参数总结

    请求方式参数总结

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

    备注：

    1. 形如： key=value&key=value的结构，叫做【urlencoded编码】
    2. GET 不能发 body 参数
    3. body 参数的类型：
        data: {name: '老刘', age: '18', sex: '女'} //data的值如果是对象，那么请求参数自动使用json编码
    data: 'name=老刘&age=18&sex=女'   // data的值如果是字符串，那么请求参数自动使用urlencoded编码

    • 1
    • 2

    从理论上说，一次性请求三种参数，可以同时通过三种形式携带，但是一般不这么做
    有请求体的请求（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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
  • 相关阅读:
    数学公式与随机数
    一、首页第一个首页栏制作【仿淘票票系统前后端完全制作（除支付外）】
    【github】关于分支保护
    1050 String Subtraction
    PHP 如何创建一个 composer 包 并在 项目中使用自己的 composer sdk 包
    【Python】Python图形化界面库PySimpleGUI的简单使用
    PHP8中的魔术方法-PHP8知识详解
    lvgl8.3.5版本 设置界面滚动条显示状态
    【6】Docker中部署Nginx
    PbootCms微信小程序官网模版/企业官网/社交电商官网/网络工作室/软件公司官网
  • 原文地址：https://blog.csdn.net/qq_38799387/article/details/126398530