Vue通过axios发送ajax请求基础演示

//1.php
<?php
echo 123;
//html

 <div id='app'>
    	<input type="button" @click='get' value='get' name="">
    	<input type="button" @click='post' value='post' name="">
    	<input type="button" @click='jsonp' value='jsonp' name="">
    </div>
//js
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		methods:{
			get(){
				axios.get('1.php').then(res=>{
					console.log(res);
				})
			}
		}
	})
</script>

var vm = new Vue({
		el:'#app',
		methods:{
			get(){
				axios.get('1.php?id=1&name="测试"').then(res=>{
					console.log(res);
				})
			}
		}
	})

var vm = new Vue({
		el:'#app',
		methods:{
			get(){
				axios.get('1.php',{params:{
					id:1,
					name:'测试'
				}}).then(res=>{
					console.log(res);
				})
			}
		}
	})

axios({
	method: 'post',
	url: '1.php',
	params: {
	firstName: 'Fred',
	lastName: 'Flintstone'
	},
    headers: {
			'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
	},
}).then(function(res){
		console.log(res)
	})

axios({
	url: '1.php',
	method: 'post',
	data: {
			firstName: 'Fred',
			lastName: 'Flintstone'
	},
	//数据转换
	transformRequest:[data=>{
		let res = ''
		for (let item in data){
				res +=item + "="+data[item]+"&";
		}
		return res;
	 }],
				  
	headers: {
			'Content-Type': 'application/x-www-form-urlencoded'
		}
}).then(function(res){
		console.log(res)
})