zoukankan      html  css  js  c++  java
  • vue 使用axios 发送表单数据

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>     //引入 vue 和axios

    <body>

    <form action="" id="form">

    <label for="">账号<input v-model="login.zh" type="text" name="" id="" value="" /> </label>     //双向绑定数据zh
    <label for="">密码<input v-model="login.mm" type="password" name="" id="" value="" /></label>       //双向绑定数据mm

    <input v-on:click="dj" type="button" value="提交" />    //添加 click事件
    </form>

    <script type="text/javascript">
    new Vue({
    el: '#form',
    data: {
    login:{mm: '',
    zh: ""}
    },
    methods: {
    dj: function() {


    console.log(this.login)      ////返回的是一个包含很多内容东西的对象 里边还有不想要的东西
    var obj=JSON.stringify(this.login)   ////JSON.stringify()JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。 为了清除不想要的东西
    console.log(obj)
    axios.post('/user',obj)
    .then(function() {
    console.log(response);
    })
    .catch(function(error) {
    console.log(error);
    });
    }

    }
    })
    </script>

    </body>

    </html>

    --------------

    总结

    axios 发送数据 的方法

    get 方法

    axios.get('/user?ID=12345')

      .then(function (response{
        console.log(response);
      })
      .catch(function (error{
        console.log(error);
      });
     
    post 方法
    axios.post('/user'{
        firstName'Fred',
        lastName'Flintstone'
      })
      .then(function (response{
        console.log(response);
      })
      .catch(function (error{
        console.log(error);
      });
  • 相关阅读:
    网管的自我修养-网络系统
    网管的自我修养-电脑维护
    iOS继承与类别
    iOS支付宝集成
    HTTP HTTPS TCP/IP UDP
    AFNetworking新版本3.0的迁移
    GCD使用 并行串行队列同步异步执行组合情况
    使用vim遇到的问题
    mac取色
    网络解析
  • 原文地址:https://www.cnblogs.com/nns4/p/6955603.html
Copyright © 2011-2022 走看看