zoukankan html css js c++ java

vue交互

交互:（vue.js v1.0.21 vue-resource.js v0.7.0）
    $http    （ajax）

    如果vue想做交互

    引入: vue-resouce

    get:
        获取一个普通文本数据:
        this.$http.get('aa.txt').then(function(res){
            alert(res.data);
        },function(res){
            alert(res.status);
        });
        给服务发送数据:√
        this.$http.get('get.php',{
            a:1,
            b:2
        }).then(function(res){
            alert(res.data);
        },function(res){
            alert(res.status);
        });
    post:
        this.$http.post('post.php',{
            a:1,
            b:20
        },{
            emulateJSON:true
        }).then(function(res){
            alert(res.data);
        },function(res){
            alert(res.status);
        });
    jsonp:
        https://sug.so.360.cn/suggest?callback=suggest_so&word=a

        https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow

        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
            wd:'a'
        },{
            jsonp:'cb'    //callback名字，默认名字就是"callback"
        }).then(function(res){
            alert(res.data.s);
        },function(res){
            alert(res.status);
        });

get实例（html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" @click="get()">
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/vue-resource0.7.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{

                },
                methods:{
                    get:function(){
                        this.$http.get('http://localhost:8088/workSpace/data/get.php',{
                            a:1,
                            b:2
                        }).then(function(res){
                            alert(res.data);
                        },function(res){
                            alert(res.status);
                        });
                    }
                }
            });
        };
    </script>
</body>
</html>

get.php

<?php
$a=$_GET['a'];
$b=$_GET['b'];
echo $a+$b;
?>

post实例（html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" @click="get()">
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/vue-resource.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{

                },
                methods:{
                    get:function(){
                        this.$http.post('http://localhost:8088/workSpace/data/post.php',{
                            a:1,
                            b:20
                        },{
                            emulateJSON:true
                        }).then(function(res){
                            alert(res.data);
                        },function(res){
                            alert(res.status);
                        });
                    }
                }
            });
        };
    </script>
</body>
</html>

post.php

<?php
$a=$_POST['a'];
$b=$_POST['b'];
echo $a-$b;
?>

jsonp实例（html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="js/vue.js"></script>
    <script src="js/vue-resource0.7.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{

                },
                methods:{
                    get:function(){
                        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                            wd:'a'
                        },{
                            jsonp:'cb'
                        }).then(function(res){
                            alert(res.data.s);
                        },function(res){
                            alert(res.status);
                        });
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" @click="get()">
    </div>
</body>
</html>

查看全文

相关阅读:
Sentry异常捕获平台
 docker部署RabbitMQ(单机)
Elasticsearch参数调优
 docker 部署Elasticsearch-权限认证(单节点)
ElementUI 实现el-table 列宽自适应
 vue 弹幕插件
 linux 命令笔记
 swoole安装笔记
 Swoole学习笔记
 VM安装centos8实战

原文地址：https://www.cnblogs.com/theWayToAce/p/7243101.html