1. axiox的post参数提交

  1.  axios.post默认是application/json方式提交数据，不是表单
  2.  ajax中的post默认是表单的方式提交
  3.  psot表单方式提交  application/x-www-form-urlencoded 采用&拼接

2. 修改axios post的提交方式为表单的方式

  1. axios.post方法 默认发送数据格式
  2.   application/json的方式发送的
  3.   {"name":"david","age":30}
  5.   axios({
  6.     url:"地址",
  7.     method:"post",
  8.     data:{
  9.       name:"david",
  10.       age:30
  11.     },
  12.     transformRequest: [function (data) {
  13.       // Do whatever you want to transform the data
  14.       let ret = ''
  15.       for (let it in data) {
  16.         // 如果要发送中文 编码 
  17.         ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
  18.       }
  19.       return ret
  20.     }],
  21.     headers: {
  22.       'Content-Type':'application/x-www-form-urlencoded'
  23.     }
  24.   }).then(res=>{
  25.       console.log(res)
  26.   })
  28.   发送的数据就是跟表单一样
  29.   application/x-www-form-urlencoded 
  30.   name=david&age=30

3. 案例

html

  1. <template>
  2.   <div id="app">
  3.     ![](./assets/logo.png)
  4.     <h1>用户登录</h1>
  5.     <form>
  6.       <input type="text" id="name" placeholder="用户名"><br>
  7.       <input type="password" id="password" placeholder="密码"><br>
  8.       <input type="submit" @click.prevent="loginUser" value="提交">
  9.     </form>
  10.     <hr>
  11.     <h2>用户注册</h2>
  12.     <user-info></user-info>
  13.   </div>
  14. </template>

js

  1. <script>
  2. import axios from "axios";
  3. export default {
  4.   name: 'app',
  5.   data () {
  6.     return {
  7.       msg: 'Welcome to Your Vue.js App'
  8.     }
  9.   },
  10.   components:{
  11.     "user-info":{
  12.        data(){
  13.           return {
  14.              name:"",
  15.              password:"",
  16.              email:""
  17.           }
  18.        },
  19.         methods:{
  20.           registUser(){
  21.             //注册用户信息
  22.             var self = this;
  23.             // 默认是applicatino/json方式提交数据 不是表单
  24.             // 下面这个代码是修改post的提交方式为表单的方式
  25.             /*
  26.             axios.post方法 默认发送数据格式
  27.             application/json的方式发送的
  28.             {"name":"david","age":30}
  30.             axios({
  31.               url:"地址",
  32.               method:"post",
  33.               data:{
  34.                   name:"david",
  35.                   age:30s
  36.               },
  37.               transformRequest: [function (data) {
  38.                   // Do whatever you want to transform the data
  39.                   let ret = ''
  40.                   for (let it in data) {
  41.                     // 如果要发送中文 编码 
  42.                     ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
  43.                   }
  44.                   return ret
  45.                 }],
  46.                 headers: {
  47.                   'Content-Type':'application/x-www-form-urlencoded'
  48.                 }
  49.             })
  51.             发送的数据就是跟表单一样
  52.             application/x-www-form-urlencoded 
  53.             name=david&age=30
  54.             */
  55.             axios(
  56.               {
  57.                 url:'http://localhost:8000/myRegist', 
  58.                 method:"post",
  59.                 data:{
  60.                   name:self.name,
  61.                   password:self.password,
  62.                   email:self.email
  63.                 },
  64.                 //将JSON对象 转 键=值&键=值
  65.                 /*
  66.                 {
  67.                   name:"david",
  68.                   age:30
  69.                 }
  70.                 name=小李&age=30
  71.                 // 在发送数据之前 将对象转键值对
  72.                 */
  73.                 transformRequest: [function (data) {
  74.                   // Do whatever you want to transform the data
  75.                   let ret = ''
  76.                   for (let it in data) {
  77.                     // 如果要发送中文 编码 
  78.                     ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
  79.                   }
  80.                   return ret
  81.                 }],
  82.                 headers: {
  83.                   'Content-Type':'application/x-www-form-urlencoded'
  84.                 }
  85.             })
  86.             .then(function (response) {
  87.               console.log(response);
  88.             })
  89.             .catch(function (error) {
  90.               console.log(error);
  91.             });
  92.           }
  93.         }
  94.     }
  95.   },
  96.   methods:{
  97.     loginUser(){
  98.       // 发送数据给服务器
  99.       //http://localhost:8000/myLogin?name=david&password=123
  100.       /*
  101.       localhost/:1 XMLHttpRequest cannot load http://localhost:8000/myLogin?name=wang&password=dfasf. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
  102.       */
  103.       console.log("发送数据");
  104.       var name = document.getElementById("name").value;
  105.       var password = document.getElementById("password").value;
  106.       var path = "http://192.168.104.31:8000/myLogin";
  107.       axios.get(path,{
  108.         params:{
  109.           name,
  110.           password
  111.         }
  112.       }).then(function(data){
  113.         // 验证成功和失败 怎么知道成功了还是失败了
  114.         console.log(data);
  115.         if(data.data.code==0){
  116.           alert("登录成功");
  117.         }else {
  118.           alert("登录失败");
  119.         }
  120.       },function(err) {
  121.         console.log(err);
  122.       }).catch(function(err){
  123.         console.log("捕获错误");
  124.       })
  125.     }
  126.   }
  127. }
  128. </script>