GET请求

新星_
860 阅读4分钟

Http请求方式

Http请求方式有get、post、put、delete，head，options等多种，最常用的就是get和post。前端可以发送的数据就是字符串以及文件，GET只能发送字符串。

GET请求

GET请求是最简单的Http请求方法，它一般用于请求去获取数据资源。

GET请求传参数给后端时，参数会以?分割key1=value1&k2=value2的形式拼接在URL后面，所以隐私性安全性较差，且参数长度也是有限制的，对所发信息量的限制是2000个字符。请求的参数只能是ASCII码，所以中文需要URL编码。但是GET请求速度快，它并不会把数据放在响应体一起发给后端，GET请求可用于提交非敏感数据和小数据。

Axios做GET请求

发送get请求，在axios方法中传递参数用对象在params属性中设置。后端返回的数据保存在一个对象中，通过js可以操作返回的数据

Axios做GET请求方式

 axios({
    url: '/a',
    params: {
     //传入的参数
    }
    })
   .then(response => {
     })

    axios.get('url?拼接传入的参数').then(response => {
    })

在egg框架中，接收GET请求的数据用ctx.request.query 或者 ctx.query。底层代码也是js语言就是用url和querystring模块解析的。

<body>
    <input type="text" id="inp">
    <button onclick="fn()" id="sea">search</button>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.js" type="application/javascript"></script>
    <script>
        function fn(){
            let inp=document.getElementById("inp").value;
            axios("/get",{params:{value:inp,key:6}})
            .then(res=>console.log(res));
        };
    </script>
</body>

async get() {
//后端接收GET数据
    let data =this.ctx.request.query;
    this.ctx.body = data;
  }

router.get("/get",controller.home.get);

image.png

image.png

浏览器的地址栏做网络请求时发送的请求就是GET请求也只能是GET请求，也可以在地址栏的URL后拼接参数发送到后端服务器

浏览器接收到来自后端服务器发送的数据时会直接读取并渲染在页面上，当解析数据失败时，浏览器会直接下载到客户端的默认路径的磁盘中，比如浏览器无法解析压缩包就会直接下载。

常见的文本文档，视频，音频，图片浏览器都可以解析。

a标签的href属性发网络请求也只能是GET请求，并且是a标签点击事件触发了默认事件（不是默认事件自定义的点击事件也不会发起GET请求）才会发起GET请求。发送网络请求给href属性的网址，接收到后端返回的数据会直接读取并渲染在页面上，当解析数据失败时，会直接下载。

a标签的href属性就是相当于修改了window.loaction.href做页面跳转，window.loaction.href改变后浏览器的地址栏就会发生改变，就类似于浏览器地址栏做网络请求，区别是a标签的target属性可以决定打开页面的方式。

<body>
    <input type="text" id="inp">
    <button onclick="fn()" id="sea">search</button>
    <a href="/aotu?name=aotu&leader=syjung">AOTU</a>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.js" type="application/javascript"></script>
    <script>
        function fn(){
            let inp=document.getElementById("inp").value;
            axios("/get",{params:{value:inp,key:6}})
            .then(res=>console.log(res));
        };
    </script>
</body>

image.png

img标签的src属性也只能GET请求，返回的数据有CSS样式设置就会按照CSS设置的样式被渲染成图片，数据如果不是图片编码就会被页面渲染成图片裂开的图标，是浏览器的功能。

link标签的href属性也只能GET请求，返回的数据按照功能使用，是CSS样式解析为CSS样式结构体来渲染页面，是第三方脚本（也可以引入js代码）或者插件就运行其功能

script标签的src属性只能GET请求，返回的数据是js代码就会用JavaScript执行引擎去运行代码。

form表单的action属性也能做网络请求，它也是网页中唯一能传输文件的网络请求技术，form表单的action属性它可以做GET请求也能做POST请求以及DELETE请求等发送给action属性对应的网址。method属性设置请求的方式是GET还是POST等请求。

1.用户点击了表单内部的提交按钮<input type="submit" name="" id="">，或者触发了表单的提交事件

2.GET请求会把form表单中的数据全部解析为URL的query参数

3.返回的数据会直接读取并渲染在页面上，当解析数据失败时，会直接下载。也可以在target属性设置打开页面的方式

<form action="/get" method="get" target="_blank">
        <input type="text" name="acount">
        <br>
        <input type="password" name="pwd">
        <input type="submit">
    </form>

async get() {
    let data =this.ctx.request.query;
    console.log(data,666666);
    this.ctx.body = "数据提交成功";
  }

router.get("/get",controller.home.get);

image.png

image.png

后端服务器收到的提交数据

image.png

avatar
文章
阅读
粉丝