2020-12-26 22:13:17 Cyberbolt
本文记录面向对象编程中,如何在js中优雅地使用Ajax(Ajax成功响应后,可直接调用类属性)
环境:已经引入jQuery库
先上源码
class Test{
constructor(){
this.data = '测试数据为:';
}
//GET方法
get_url(){
$.ajax({
url: "/api/test",
type: "GET",
dataType: "json",
success: (data) => {
//请求成功后访问类属性,并显示服务端返回数据
console.log('测试数据为' + data['content']);
}
});
}
//POST方法(表单)
post_url(){
$.ajax({
url: "/api/test",
data: {
'name' : 'jenny',
'sex' : 'fm'
}, //请求的表单
type: "POST",
dataType: "json",
success: (data) => {
//请求成功后访问类属性,并显示服务端返回数据
console.log('测试数据为' + data['content']);
}
});
}
//POST方法(JSON)
post_url(){
$.ajax({
url: "/api/test",
data: JSON.stringify({
'name' : 'jenny',
'sex' : 'fm'
}), //请求的表单
type: "POST",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: (data) => {
//请求成功后访问类属性,并显示服务端返回数据
console.log('测试数据为' + data['content']);
}
});
}
}
这里在ajax success后,这里没有使用闭包,而是通过剪头函数执行后续操作,使用箭头函数可轻松访问上层对象中的属性。