這是最近做點一個用戶點贊的功能代碼,思路:
- 獲取當前點擊的cuskey值(相當于數據表的ID),用ajax 調用 invok/get 接口查詢并記錄對應的內容,var data222;
- 調用接口/invok/update/ 上傳 dataa222 的參數并更新數據,成功后執行頁面數值+1,并改變按鈕圖片
- 更新成功后,需要再次調用/invok/get 接口,獲取當前操作用戶所點贊的cuskey,
- 獲取后,更新當前數據表中,zan這個數組的數據(存點贊了那些cuskey);
源代碼:
$.ajax({
url: '/invok/get/',
type: 'POST',
data: { actid: '2017082121470227', keytype: '3', cuskey: cuskeysss },
dataType: 'json',
success: function(data) {
// console.log(data);
count1 = JSON.parse(data.Data.JsonContent).count;
var data222 = {
cuscode: JSON.parse(data.Data.JsonContent).cuscode,
content: JSON.parse(data.Data.JsonContent).content,
count: count1 + 1,
satus: JSON.parse(data.Data.JsonContent).satus,
Sort: JSON.parse(data.Data.JsonContent).Sort,
cuskeya: JSON.parse(data.Data.JsonContent).cuskeya,
name: JSON.parse(data.Data.JsonContent).name,
img: JSON.parse(data.Data.JsonContent).img,
};
$.ajax({
url: '/invok/update/',
type: 'POST',
data: { actid: '2017082121470227', keytype: '3', cuskey: cuskeysss, jsoncontent: JSON.stringify(data222) },
dataType: 'json',
success: function(data) {
// show();
$(obj).find("img").attr("src", "http://i2.mbscss.com/img/moonbasa/2017/ydw/M8_21_203200.jpg");
$(obj).removeAttr('onclick');
$(obj).find(".btn2").html(count1 + 1);
//插入點贊數組
$.ajax({
url: '/invok/get/',
type: 'POST',
data: { actid: '2017008821142411112', keytype: '3', cuskey: $.cookie('MoonbasaT_Cuscode') },
dataType: 'json',
success: function(data) {
var arr = JSON.parse(data.Data.JsonContent).zan;
arr.push(cuskeysss);
var data333 = {
zan: arr,
};
$.ajax({
url: '/invok/update/',
type: 'POST',
data: { actid: '2017008821142411112', keytype: '3', cuskey: $.cookie('MoonbasaT_Cuscode'), jsoncontent: JSON.stringify(data333) },
dataType: 'json',
success: function(data) {
// console.log(data);
}
});
}
});
}
});
}
});
可以看到,嵌套了很多層,代碼的可讀性十分的差,所以我用promise優化了下代碼:
var ajaxPromise = new Promise(function(resolve) {
resolve();
});
ajaxPromise.then(function() {
return $.ajax({
url: '/invok/get/',
type: 'POST',
data: { actid: '2017082121470227', keytype: '3', cuskey: cuskeysss },
dataType: 'json',
success: function(data) {
console.log(data);
return data;
}
});
}).then(function(data) {
console.log(data);
var count1 = JSON.parse(data.Data.JsonContent).count;
var data222 = {
cuscode: JSON.parse(data.Data.JsonContent).cuscode,
content: JSON.parse(data.Data.JsonContent).content,
count: JSON.parse(data.Data.JsonContent).count + 1,
satus: JSON.parse(data.Data.JsonContent).satus,
Sort: JSON.parse(data.Data.JsonContent).Sort,
cuskeya: JSON.parse(data.Data.JsonContent).cuskeya,
name: JSON.parse(data.Data.JsonContent).name,
img: JSON.parse(data.Data.JsonContent).img,
};
$.ajax({
url: '/invok/update/',
type: 'POST',
data: { actid: '2017082121470227', keytype: '3', cuskey: cuskeysss, jsoncontent: JSON.stringify(data222) },
dataType: 'json',
success: function(data) {
// show();
$(obj).find("img").attr("src", "http://i2.mbscss.com/img/moonbasa/2017/ydw/M8_21_203200.jpg");
$(obj).removeAttr('onclick');
$(obj).find(".btn2").html(count1 + 1);
}
});
}).then(function() {
return $.ajax({
url: '/invok/get/',
type: 'POST',
data: { actid: '2017008821142411112', keytype: '3', cuskey: $.cookie('MoonbasaT_Cuscode') },
dataType: 'json',
success: function(datas) {
return datas;
}
});
}).then(function(datas) {
var arr = JSON.parse(datas.Data.JsonContent).zan;
arr.push(cuskeysss);
var data333 = {
zan: arr,
};
$.ajax({
url: '/invok/update/',
type: 'POST',
data: { actid: '2017008821142411112', keytype: '3', cuskey: $.cookie('MoonbasaT_Cuscode'), jsoncontent: JSON.stringify(data333) },
dataType: 'json',
success: function(data) {
// console.log(data);
}
});
})