vue webpack中使用ajax传输数据给后台

在使用数据传输中,大多数采用的都是ajax技术,那么在vue中怎样使用ajax技术呢?本篇将带你入门vue axios中ajax技术。

1、基本配置

   (1)首先在你的vue项目下配置对应的文件axios

    下载axios组件,最终放置在node_modules\axios\dist中   

      npm install axios -S 

   (2)配置main.js中的内容   

      import axios from 'axios'

      Vue.prototype.$ajax = axios

 2、使用方法

    <div class="form_submit">
  <input type="button" value="提交" class="submit" @click="onClick(user,pass)"/>

   </div>

  方法:

     onClick(value1,value2){
     if(value1===''&& value2===''){
      console.log("请输入用户名和密码");
      return false;
     }
    this.$ajax({
                    method: 'post',
                    url : "你的url位置",
                    data : {
                        user : this.user,
                        pass : this.pass
                    },
                    success : function(data) {
         var message = $.parseJSON(data);//后台返回的json数据需要转为对象
                         vue.selectById=message;//把后台返回的JSON数据赋给selectById
                    },
                    error : function(){
                        alert("错误");
                    }
                });
    console.log("提交成功!");
    return true;

   }

3、注意事项

    接口要与后台给的保持一致,不然出错!


阅读更多
文章标签: vue ajax axios
个人分类: vue
想对作者说点什么? 我来说一句

vue后台管理系统

2017年06月21日 263KB 下载

ajax 前台后台传输数据

dirk_cong dirk_cong

2017-10-30 17:55:28

阅读数:107

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭