Vue Tutorial 1-08 Interactive get, post, JSONP

Vue Tutorial 1-08 Interactive get, post, JSONP

First, if Vue wants to do the interaction, introduce: Vue-resouce

Two, get mode

1, get get a plain text data:

<! DOCTYPE html><script src= "Vue-resource.js" ></script><script>window.onload=function(){ NewVue ({el:' Body ', data:{}, methods:{get:function(){ This . $http. Get (' A.txt '). Then (function (res) {alert (res.status);//Success                        alert (res.data); },function (res) {alert (res.status);//Failed to return alert (res.data);                    }); }                }            });    }; </script> 

	





	2. Get the data sent to the service :



	



 
<! DOCTYPE html>window.onload=function(){ NewVue ({el:' Body ', data:{}, methods:{get:function(){ This . $http. Get (' get.php ', { a:1, b:2 }). Then (function (res) {alert (res.data); },function (res) {alert (res.status);                    }); }                }            });    }; </script>

	





	Second, post mode



	




<! DOCTYPE html>window.onload=function(){ NewVue ({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>

	





	Four, Jsonp Way



	





	





	Get Baidu Interface



	





	





	





	





	





	





	





	





	Viewing response data



	





	





	





	





	





	





	





	





	JSONP Request Baidu Interface



	





	





	





	




<! DOCTYPE html>window.onload=function(){ NewVue ({el:' Body ', data:{}, methods:{get:function(){ This . $http. Jsonp (' Https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su ', {wd: ' a ' },{JSONP: ' CB '//callback function name }). Then (function(res) {alert (RES.DATA.S); },function(res) {alert (res.status);                    });        }                }            });    }; </script>

	





	JSONP Request Interface



	





	





	





	




<! DOCTYPE html>window.onload=function(){ NewVue ({el:' Body ', data:{}, methods:{get:function(). Then (function(res) {alert (RES.DATA.S); },function(res) {alert (res.status);                    });        }                }            });    }; </script>

	





	





	





	





	Vue Tutorial 1-08 Interactive get, post, JSONP