shangrila-xiu

112
文章
101
分类
33
标签

inteaction交互

交互

讲到交互，我首先想到的是连接到服务器

angular中，$http ———(用ajax对象来做交互的)

要先在官网下载 vue-resource.js，vue官网

交互的方式有三种：post（加密） 、get (获取普通数据)、jsonp

1、可以先看一下代码,在工程目录中创建一个a.txt的文档,下面的这个是get来交互的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get交互</title>
    <script 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.get('a.txt').then(function(res){
       alert('成功了！');//成功在本文件夹创建了a.txt，打开它写入数据，是下面res.data将会返回的
                			alert(res.data);//或得数据
                		},function(){
                			alert('失败了！');
//              			alert(res.status);//获得状态码
                		});
                	}
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" @click="get()" />
    </div>
</body>
</html>

2、下面来给post的,这里需要注意的是服务器的配置，这里使用了post.php，否则会报错弹出500，报错原因是内部服务器出错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>post交互</title>
    
    <style>
    </style>
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'body',
                data:{
                },
                methods:{
                    get:function(){
                        this.$http.post('post.php',{
                            a:1,
                            b:20
                        },{
                            emulateJSON:true
                        }).then(function(res){
                            alert(res.data);
                        },function(res){
                            alert(res.status);
                        });
                    }
                }
            });
        };
    </script>
</head>
<body>
    <input type="button" value="按钮" @click="get()">
</body>
</html>

3、剩下的还有jsonp的交互需要讲一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
	<!--我用的是百度的来做的例子-->
	<!--https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&json=1&p=3&sid=1434_19033_21081_24328_24395&req=2&sc=eb&csor=0&pwd=a&cb=jQuery110208845317490843173_1506606779553&_=1506606779558-->
    <meta charset="UTF-8">
    <title>post交互</title>
    
    <style>
    </style>
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'body',
                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>
    <input type="button" value="按钮" @click="get()">
</body>
</html>

经过上面的代码可以看出他们的相同点和不同点吧，为了方便记忆，每个人都有自己不同的记忆方法。但是我现在发现jsonp最好用，通过看到我出的例子就应该看得出来吧，百度这个大东西的搜索，很厉害吧，再将来的前端学习过程中，涉及这种的搜索网页内容，可以借鉴的就借鉴一下。。。。

有必要将我再例子中提到的简单的PHP分享一下:
1
2
3
4
5
<?php
$a=$_POST['a'];
$b=$_POST['b'];
echo $a-$b;
?>