Vue ajax关于get、post、jsonp的请求

get请求<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><scri

一朵小彩云

2686人浏览 · 2018-07-28 16:19:44

一朵小彩云 · 2018-07-28 16:19:44 发布

get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../vue1026.js"></script>
    <script src="../vue-resource.min.js"></script>
</head>
<body>

<div id="app">
    <button @click="getdata()">get请求</button>
    {{dataOne | json}}
</div>
<script >
    new Vue({
        el: "#app",
        data:{
            dataOne:'',
        },

        methods:{
            getdata:function () {
                var url="http://192.168.1.61:9070/api/Materiel/GetATSDistribution";
                this.$http.get(url)
                .then(function (response) {
                    console.log(response.body)
                    this.dataOne=response.body;
                })
            }
        }
    })
</script>

</body>
</html>

post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../vue1026.js"></script>
    <script src="../vue-resource.min.js"></script>
</head>
<body>

<div id="app">
    <button @click="postdata()">post请求</button>
    {{dataOne | json}}
</div>
<script >
    new Vue({
        el: "#app",
        data:{
            dataOne:'',
        },

        methods:{
            postdata:function () {
                var url="http://192.168.1.61:9070/api/Materiel/GetATSDistribution";
                //传到服务器的请求文体的数据， emulateJSON:true固定写法
                this.$http.post(url,{
                    "NAMES":"空余"
                },
                    {
                        emulateJSON:true
                    })
                    .then(function(response){
                        console.log(response)
                    })

            }
        }
    })
</script>

</body>
</html>

JSONP请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../vue1026.js"></script>
    <script src="../vue-resource.min.js"></script>
</head>
<body>

<div id="app">
    <button @click="Jsonp()">get请求</button>
    {{dataOne | json}}
</div>
<script >
    new Vue({
        el: "#app",
        data:{
            dataOne:null,
        },

        methods:{
            Jsonp:function () {
                this.$http.jsonp("http://192.168.1.61:9070/api/Materiel/GetATSDistribution")
                    .then(function (response) {
                        this.dataOne=response.body
                        console.log(response)
                    })
        }
    }})
</script>

</body>
</html>

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}$/, //不连续的两位字母// /^