Axios

2018-06-19 16:07:00
admin
原创
546
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
</head>
<style>
    p{
        color: red;
    }
</style>
<body>
    <div id=app>
        <p>{{message}}</p>
        <button v-on:click="getAxiosInfo">获取信息</button>
		<button v-on:click="getAxiosPostInfo">获取信息(POST)</button>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                message:"hell world",
           },
			methods:{
				getAxiosInfo:function(){
					_this = this;
					axios.get('http://www.filltext.com/?rows=1&fname=tom')
 					 .then(function (response) {
    				    console.log(response);
						_this.message = response.data[0].fname;
  					})
 				   .catch(function (error) {
    					console.log(error);
  					});
				},
				getAxiosPostInfo:function(){
					_this = this;
					axios.post('http://www.filltext.com/', {
    					rows:1,
						fname:"henry"
   					})
  					.then(function (response) {
    					console.log(response);
						_this.message = response.data[0].fname;
  					})
  					.catch(function (error) {
    					console.log(error);
  					});
				}
			}
        })

    </script>
</body>
</html>
  • QQ讨论群
  • 关注微信
    • 欢迎咨询
    • 欢迎加入QQ群 16506021
  • 公众号:源宝网络