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);
})
}
}
})