Vue.js交互

最新推荐文章于 2023-08-13 17:52:36 发布

虬川候

最新推荐文章于 2023-08-13 17:52:36 发布

阅读量325

点赞数

分类专栏： vue.js 文章标签： vue.js 交互请求 get post

本文链接：https://blog.csdn.net/qq_39383675/article/details/83449241

版权

vue.js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Vue.js交互
vue,js交互需要使用vue-resource.js库
vue.js交互借助于$http完成
语法：使用promise语法

常用的交互类型

get类型
post类型
jsonp类型

举例应用
get类型
语法：this.$http.get(‘url’, {params:{a:1,b:2…}}).then(function(res){处理请求成功},function(res){处理请求失败});

sub.php代码

<?php 
	echo $_REQUEST['a']-$_REQUEST['b'];

get.html代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript" src="vue-resource.js"></script>
</head>
<body>
	<div id="box">		
		<p>{{ arr }}</p>
		<button @click='sub()'>SUB</button>
	</div>
</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el: '#box',
		data: {
			arr:'苟利国家生死以'	
		},
		methods: {
			sub: function(){
				this.$http.get('sub.php',{params: {a:3, b:2}}).then(
					function (res){
						this.arr = res.data;
			 		},
			 		function (res){
			 			this.arr = '请求失败';
					});
			}
		}
	});
</script>

post类型
语法：this.$http.get(‘url’,{a:1,b:2…},{emulateJSON:true}).then(function(res){处理请求成功},function(res){处理请求失败});

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript" src="vue-resource.js"></script>
</head>
<body>
	<div id="box">		
		<p>{{ arr }}</p>
		<button @click='sub()'>SUB</button>
	</div>
</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el: '#box',
		data: {
			arr:'苟利国家生死以'	
		},
		methods: {
			sub: function(){
				this.$http.post('sub.php',{a:3, b:2},{emulateJSON:true}).then(
					function (res){
						this.arr = res.data;
			 		},
			 		function (res){
			 			this.arr = '请求失败';
					});
			}
		}
	});
</script>

jsonp类型
语法：this.$http.jsonp(‘url’,{params:{a:1,b:2…}},{emulateJSON:true}).then(function(res){处理请求成功},function(res){处理请求失败});

交互练习地址：https://blog.csdn.net/qq_39383675/article/category/8256374

虬川候

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js交互

Vue.js交互vue,js交互需要使用vue-resource.js库vue.js交互借助于$http完成语法：使用promise语法常用的交互类型get类型post类型jsonp类型举例应用get类型语法：this.$http.get(‘url’, {params:{a:1,b:2…}}).then(function(res){处理请求成功},function(res)...
复制链接

扫一扫