vue与后台交互数据（axios）

首先需要引入axios<script src="https://unpkg.com/axios/dist/axios.min.js"></script>1.get方法<!DOCTYPE html><html lang="en"><he

键盘哥

3265人浏览 · 2018-09-04 08:55:35

键盘哥 · 2018-09-04 08:55:35 发布

首先需要引入axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

1.get方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios测试</title>
    <!--<script src="http://unpkg.com/vue/dist/vue.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!--<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>-->
    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    msg:'Hello World!',
                },
                methods:{
                    test:function(){
                        //get请求
                        axios.get('check.php',{
                            params:{
                                name:'admin',
                                age:'123'
                            }
                        })
                            .then(res=>{
                                console.log(res);
                            }).catch(error=>{
                            console.log(error);
                        });
 
                      
                    }
                }
            });
        }
    </script>
</head>
<body>
<div id="box">
<input type="button" @click="test()" value="按钮">
</div>
</body>
</html>

2.post方法

//方式一
 axios.post('http://127.0.0.1:8080/VueStudy/test/getTest.action','name=admin&a=13')
                            .then(res=>{
                                console.log(res);
                            }).catch(error=>{
                            console.log(error);
                        });
                        //方式二
                        axios.post('http://127.0.0.1:8080/VueStudy/test/getTest.action',{
                            name:'admin',
                            age:'123',
                            a:"gaoguozhen"
                        },{
                            transformRequest:[
                                function(data){
                                    let params='';
                                    for(let index in data){
                                        params+=index+'='+data[index]+'&';
                                    }
                                    return params;
                                }
                            ]
                        })
                            .then(res=>{
                                console.log(res);
                            }).catch(error=>{
                            console.log(error);
                        });

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^