GET和POST的具体传参方式以及结构！！！（代码详解）

• 一、GET 和 POST 传参方式的优缺点
  • 1.post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）
  • 2.post发送的数据量更大（get有url长度限制）
  • 3.post能发送更多的数据类型（get只能发送ASCII字符）
  • 4.post比get慢
  • 5.Post是向服务器提交数据的一种请求，get是向服务器发索取数据的一种请求。
  • 6.get会将数据缓存起来，而post不会
  • 7.post请求包含更多的请求头
  • 8.post在真正接受数据之前会先将请求头发送给服务器进行确认，然后才真正发送数据
• 二、GET 和 POST 传参方式的请求过程
  • post请求的过程：
    • 1.浏览器请求tcp连接（第一次握手）
    • 2.服务器答应进行tcp连接（第二次握手）
    • 3.浏览器确认，并发送post请求头（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）
    • 4.服务器返回100 continue响应
    • 5.浏览器开始发送数据
    • 6.服务器返回200 ok响应
  • get请求的过程
    • 1.浏览器请求tcp连接（第一次握手）
    • 2.服务器答应进行tcp连接（第二次握手）
    • 3.浏览器确认，并发送get请求头和数据（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）
    • 4.服务器返回200 ok响应。
• 三、相对来说 GET 对比 POST 的优势是什么？
  • GET 的URL可以手动输入啊，你在地址栏打个POST看看。本质上面， GET 的所有信息都在URL， 所以很方便的记录下来重复使用。如果你期望你复制的url资源可以更好的分享给别人看，那就用GET方法吧～POST方法做不到哦～
  • 然而从深层次上分析：虽然这两者都是明文传送。但它们表达的语义不一样，这决定了主干网络可以对其做不同的处理。
    • get表达的是一种幂等的，只读的，纯粹的操作，即它除了返回结果不应该会产生其它副作用（如写数据库），因此绝大部分get请求（通常超过90%）都直接被CDN缓存了，这能大大减少web服务器的负担。
    • 而post所表达的语义是非幂等的，有副作用的操作，所以必须交由web服务器处理。
    • 因此若是把所有get请求换成post，意味着主干网络上的所有CDN都废掉了，web服务器要处理的请求数量将成百上千倍地增加，显然这不是一个聪明的做法！
• 四、VUE之使用 AXIOS 进行GET 和 POST 进行传参
  • 1.axios的定义
    • 基于Promise的HTTP客户端，用于浏览器和node.js。
  • 2.axios的特征
    • 1.做的XMLHttpRequest从浏览器
    • 2.让HTTP从node.js的请求
    • 3.支持Promise API
    • 4.拦截请求和响应
    • 5.转换请求和响应数据
    • 6.取消请求
    • 7.自动转换JSON数据
    • 8.客户端支持防范XSRF
  • 3.axios的安装
    • 三种方式，均可进行

    • $  npm install axios   // 使用npm
      $  bower install axios   // 使用bower
      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>   // 通过cdn直接调用
      

  • 4.axios的使用
    • 添加引用

    • import axios from 'axios';
      

  • 5.aixos之 get传参方式模板
    • 此次get传参中的url需要进行字符串拼接

    • var id = 001;
      var url =  'http://192.168.**.***:8080/Card';
      url += 	`?cardId=${id}`;   // 拼接字符串
      axios.get(url).then(function(response) {
        if (response.data == false) {
        	this.$Message.success("注册成功");
        } else {
        	this.$Message.info("注册失败");
        }
      });
      

  • 6.aixos之 post传参方式实例

    • var url =  ''http://192.168.**.***:8080/Card'; 
      axios.post('url', {
        数据库字段1: 'value',
        数据库字段2: 'value'
      }
      )
      .then(function (response) {
       //具体操作
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });