前后端数据传输的两者方法——GET和POST

GET

在原生AJAX网络请求中，xhr对象的open方法配置信息，就已经接触过了“GET”，今天来好好解释一下它的用法。

GET请求可以传递信息给服务器后端，将要传递的参数放在网址的querystring字段，egg框架的后端用ctx.request.query获取。

在传输的过程中传递的信息在请求数据包的头部，我们在浏览器的地址栏就可以看到我们传递的信息，因此它非常的不安全，不适合用于账号密码之内的传输，但是它的传输速度快，大部分的网络传输都是采用的GET请求。

GET在axios中的使用（主流）

传递参数有两种写法：1、直接写在网址的querystring字段中   2、axios()方法的第二个参数也可以拿来传递参数，如{params:{a:1,b:2}}，在代码运行时，这个参数对象会被拆分拼接到网址上，是这个团队为方便我们封装的技术。

写个代码简单的实现一下前后端的信息交互：

静态页面：

 <h1>我来了egg框架</h1>
    <input type="text" id="me">
    <button>GET方法传递消息</button>

    <script>
        var btn=document.querySelector("button")
        btn.onclick=function(){
            var intv=document.querySelector("input").value
            //写法1
            //var url=`/ajax?key1=${intv}`
            //axios(url)
            //.then(res=>console.log(res))
            //写法2
            var url="/ajax"
            axios(url,{params:{key1:intv}})
            .then(res=>console.log(res))
        }
    </script>

在路由文件中注册一个数据接口：

module.exports = app => {
  const { router, controller } = app;
  router.get("/ajax",controller.home.ajax)
};

在home.js中获取传递信息：

class HomeController extends Controller {
  async ajax() {
    const { ctx } = this;//解构赋值
    var que=ctx.request.query
    ctx.body = que;
  }
}

开启服务器,在页面点击按钮获取一下信息：

 可以看到后端通过request.query获取到了传递的信息，并通过ctx.body传回给了前端。

除了利用AJAX或者封装的AJAX网络请求工具外，浏览器、a标签、img标签的src属性、link标签的href属性、form标签的action属性都能够做网络请求。

浏览器

浏览器的地址栏只能做GET网络请求 ，它会将接收到的数据直接渲染到浏览器页面，如果解析失败会下载。

借上面的服务器，我们直接在浏览器输入ajax接口的网址，并顺便写一个querystring字段。

 当请求的页面无法正常解析时，如我们请求的是一个压缩包，在public文件夹下创建a.rar：

a标签

a标签的src属性也是只能做GET请求，当我们点击这个标签时就会发送网络请求给href的网址,后端返回的数据,接受的数据会直接读取渲染,如果解析失败会下载。跟浏览器地址栏网络请求相似就不做演示了。

img标签

img标签的src属性，也是只能发get请求  返回的数据渲染成图片 如果非图片编码就会"碎裂"

link标签

link标签的href属性，也是只能发get请求 返回的数据按照功能使用，浏览器将获取到的css文件，形成css样式结构体渲染页面。 

form标签

form标签的action属性 支持GET和POST请求，用户点击了提交按钮或者触发表单的提交事件

GET请求会把form中的数据全部解析为url的querystring。

这里只讲get请求，写一个例子具体说明：

将index.html修改为：

 <button>GET方法传递消息</button> -->
    <form action="/ajax" method="get">
        <input type="text" name="uesrname" id="user">
        <input type="text" name="password" id="pwd">
        <input type="submit" value="提交">
    </form>

点击提交后：

 跟a标签一样，后端返回的数据，直接渲染到页面上。

我们在在框内输入的是zhangsan和18，它的querystring字段uesrname=zhangsan&password=18

即就是把form中的数据全部解析为url的querystring，input标签的name为key值，input标签的value

为value值。

我也可以在终端打印看到解析好的querystring对象：

POST

post传递参数会将参数转为暗文，适合传输隐私数据和大量数据的情况，在传输的过程中传递的信息在请求数据包的请求体中。

我们要在egg框架中测试Post，要先在config.default.js文件内关闭安全验证：

添加下面代码：

 config.security={
     csrf:{
       enable:false
     }
   }

post数据默认大小是100kb，我们也可以在config.default.js 中覆盖框架的默认值:

	module.exports = {
		bodyParser: {
			jsonLimit: '1mb',
			formLimit: '1mb',
		}
   };

POST发送数据的两种方法：

1、 axios.post(url,{参数字段})

2、

 var fdata=new FormData()
  fdata.append("key1","value1字段")
  fdata.append("key2","value2字段")
  fdata.append("key3","value文件1")
  fdata.append("key4","value文件2")//最多9个文件
  //value文件是指input节点的files属性中的文件对象

 axios.post(url,fdata)

与get不同的是，egg后端接收POST字段和文件不再用ctx.request.query;

而是字段用：ctx.request.body

文件用：ctx.request.files