Vue/jQuery 的 GET/POST 请求

一、vue-resource 的 GET/POST 请求

1. vue-resource 的 GET 请求

var vm = new Vue({
	el: '#app',
	data: {
		resp: {},
		api_url: '/index',
},
	methods: { 
		get_data(){
			this.$http.get(this.api_url)
			.then((response) => {
			    // 用 set 将响应结果赋给变量 resp
				this.$set(this.resp,'data',response.body)
			}).catch(function(response){console.log(response)})
		}
	}
})

2. vue-resource 的 POST 请求

var vm = new Vue({
	el: '#app',
	data: {
		resp: {},
		post_data: {'name':'abc'},
		api_url: '/index',
},
	methods: { 
		get_data(){
			this.$http.post(this.api_url,this.post_data,{emulateJSON:true})
				.then((response) => {this.$set(this.resp,'data',response.body)})
				.catch(function(response){console.log(response)})
		}
	}
})

二、Vue 中 axios 的 GET/POST 请求

1. axios 的 GET 请求

var vm= new Vue({
	el: '#app',
	data: {
	  resp: {},
	  ret_data: null,
	  api_url: '/index',
	},
	methods: { // 定义方法
      get_data(){
	    axios.get(this.api_url).then(
	      resp => {
	        let data = JSON.parse(resp.data)
	        this.$set(this.resp,'data',data)
	        this.ret_data = data
		  }).catch(err => console.log(err))
		}
	}
})

2. axios 的 POST 请求

var vm= new Vue({
	el: '#app',
	data: {
	  resp: {},
	  ret_data: null,
	  post_data: {'name':'abc'},
	  api_url: '/index',
	},
	methods: { // 定义方法
      get_data(){
	    axios.post(this.api_url, this.post_data).then(
	      resp => {
	        let data = JSON.parse(resp.data)
	        this.$set(this.resp,'data',data)
	        this.ret_data = data
	      }).catch(err => console.log(err))
		}
	}
})

三、jQuery 的 GET/POST 请求

1. jQuery 的 GET 请求

$(function(){
	$("#btn").click(function(){
		$.ajax({
			url:"/index",
			dataType:"json",
			data:{name:'abc'},
			type:"get",
			success:function(resp){
				var result
				result = JSON.parse(resp);
				}
			})
		})
	})

2. jQuery 的 POST 请求

$("btn").click(function(){
	$.post(url,{user:'abc',pwd:'******'},function(resp){
       if(resp.success){
          $.messager.alert("系统提示","添加成功","info");
       }else{
          $.messager.alert("系统提示","添加失败","error");
       }
    },"json");
}

你可能感兴趣的:(Vue,Vue,jQuery)