Ajax axios——前后端数据交互

1. Ajax

命令行安装jQuery： npm install jquery

1）$.post()：发送post请求

• 语法：$.post(url, [data], [callback], [type])
• 参数：
  * url：请求路径
  * data：请求参数
  * callback：回调函数
  * type：响应结果的类型

$.post("ajaxServlet",{username:"rose"},function (data) {
	alert(data);
},"text");

---

2）$.get()：发送get请求

• 语法：$.get(url, [data], [callback], [type])
• 参数：
  * url：请求路径
  * data：请求参数
  * callback：回调函数
  * type：响应结果的类型

$.get("ajaxServlet",{username:"rose"},function (data) {
	alert(data);
},"text");

3）ajax vue 参数

var app = new Vue({
	el: "#app",
	data: {
		searchText: '12',
		dis: ''
	},
	methods: {
		btn() {
			var self = this;
			$.ajax({
				// 1. 直接请求不传参数
				url: 'http://localhost:8081/video/listl',
				type: 'GET',
				success: function (response) {
					console.log(response);
					// 将响应数据保存到 Vue 组件的 responseData 中
					self.dis = response;
				},
				
				// 2. 发送请求并在url中传递参数
				url: 'http://localhost:8081/user/list?uname=小红',
				type: 'GET',
				success: function (response) {
					console.log(response);
					// 将响应数据保存到 Vue 组件的 responseData 中
					self.dis = response;
				},
				
				// 3. 发送请求并在data中传递多个参数
				url: 'http://localhost:8081/user/unUpdate',
				type: 'GET',
				data: { 
					uname: '小红',
					uid: 2
				},
				success: function (response) {
					console.log(response);
					// 将响应数据保存到 Vue 组件的 responseData 中
					self.dis = response;
				},
			});
		}
	}
})

---

2. axios

命令行安装 axios： npm install axios

1）axios 发get请求

//1. 直接请求不传参数
axios.get("http://localhost:9527/springboot-demo/user/list")
.then(res => {
	//then:成功时的回调函数
	//res:后端的响应
	this.userList = res.data;
})

let id = 6;
let name = "张三";
//2. 使用axios发get请求并传递参数
axios.get("http://localhost:9527/springboot-demo/user/detail?id="+id)
.then(res=>{
	console.log("axios传递一个参数>>>>>>",res);
})

//3. 使用axios发get请求传递多个参数
axios.get("http://localhost:9527/springboot-demo/user/select",{
params:{
	userId:id,
	userName:name
}
}).then(res=>{
	console.log("axios传递多个参数>>>>>>",res);
})

//4. 使用路径传参
axios.get("http://localhost:9527/springboot-demo/user/getUserById/"+id)
.then(res=>{
	console.log("axios使用路径传参>>>>>>",res);
})

2）axios 发post请求

new Vue({
	el:"#app",
	data:{
		user:{
			userName:"",
			userAge:""
		}
	},
	created(){ },
	methods:{
		submitData(){
			axios.post("http://localhost:9527/springbootdemo/user/add",this.user)
			.then(res=>{
				console.log(res);
			})
		}
	}
})