这是最近做点一个用户点赞的功能代码,思路:

获取当前点击的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);

}

});

})

ajax嵌套ajax的坏处,promise解决ajax的多重嵌套相关推荐

  1. jsonp解决ajax跨域问题,用JSONP解决ajax跨域问题

    JSONP:JSON With Padding 要点: 1.script标签 2.用script标签加载资源是没有跨域问题的 概要: 在资源加载进来之前先定义一个函数,这个函数接受一个参数(数据),函 ...

  2. ajax传输json数据格式乱码_解决Ajax加载JSon数据中文乱码问题

    一.问题描述 使用zTree的异步刷新父级菜单时,服务器返回中文乱码,但项目中使用了SpringMvc,已经对中文乱码处理,为什么还会出现呢? 此处为的异步请求的配置: Java代码 async: { ...

  3. ajax如何传超长字符串_解决ajax超长字符串、中文乱码问题

    在最近的项目测试中发现通过ajax发送超长参数时遇到这个脚本错误: 系统找不到指定资源 the system cannot locate the resource specified 意思是参数太长, ...

  4. $.ajax 加了headers报错_Springboot解决Ajax跨域的三种方式

    这篇文章不华丽,但比较实用,能解决不少大家实际业务中的问题.大家可以收藏起来,以备用时之需! 1.同源策略 1.1 含义 ajax出现请求跨域错误问题,主要原因就是因为浏览器的"同源策略&q ...

  5. Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案)

    这篇文章主要介绍了用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案),需要的朋友可以参考下 问题 前端小同学在做页面的时候,犯了个常见的错误:把多个Ajax请求顺序着写下来了, ...

  6. 为什么要用promise处理ajax,用promise.all解决ajax异步循环请求问题

    Promise.all() 并不能解决循环的问题,一般情况下 .all() 的参数是 Promise 数组(暂时不考虑其它类似).那么,数组中的每个 Promise 都代表着一个异步操作,Promis ...

  7. promise ajax 队列,ES6中的promise,从使用promise封装ajax说起

    1为啥要用promise? js是单线程的,理论上所有代码都是同步的,从上到下一行行执行.然而就这样傻傻解析运行js的话,碰到较重的任务时,会阻塞进程,如发送一个用户是否登录验证请求,请求完成响应之前 ...

  8. promise将ajax变为同步,ES6-Promise改造异步请求为同步

    1.扩展:ajax 1.1 代码如下 $.ajax({ url:'地址', type:'get/post', data:{}, dataType:'json/jsonp', success:funct ...

  9. ajax封装,promise封装ajax,axios封装

    一.概念 ajax: 核心XMLHttpRequest ,在不重新加载整个页面的情况下更新部分数据 promise: 承诺,只有三种模式( pending:执行状态.fulfilled:已成功.rej ...

最新文章

  1. CMake 指定安装目录
  2. 面向函数范式编程(Functional programming)
  3. 关联tomcat源代码
  4. Linux下的RTC子系统
  5. ESP8266等模块
  6. 关于Docker官方CentOS镜像无法启动mysqld的总结
  7. mysql ssd优化_mysql ssd 优化
  8. Qt工作笔记-两种方法从容器中筛选出父类和子类(继承法、typeid法)
  9. 【C、C++】ctype.h、cctype中的isnumber()函数和isdigit()函数的区别
  10. TP5.x——update更新成功但是返回是0
  11. 也来说说C#异步委托
  12. 四元素与欧拉角之间的转换
  13. Android显示shp文件,Arcgis for Android移动平台能直接打开本地的shp文件吗
  14. Servlet运行原理(Tomcat为例)
  15. Tempo数据分析平台,助力企业高效完成数据预处理工作
  16. 苹果mac启动台变成问号_MAC开机停止响应并出现闪烁问号的解决方法
  17. 精选1000个机械原理动图
  18. 移动端 设计师设计APP UI常用软件总结
  19. 软考常考的四种设计模式
  20. ps彩色照片变黑白照片

热门文章

  1. 如何为iPhone 5屏幕分辨率开发或迁移应用程序?
  2. 使用getApplication()作为上下文的对话框抛出“无法添加窗口-令牌null不适用于应用程序”
  3. Spring通过静态方法factory-method或实例工厂factory-bean获取bean对象
  4. unable to recognize ole stream是什么意思_洞彻状态管理,或者说为什么你永远做不到...
  5. python http请求_python模拟http请求
  6. java date eee_java将 Date原始格式EEE MMM dd HH:mm:ss Z yyyy转成指定格式
  7. 安装mysql后电脑右下角_windows安装mysql方法 mysql5.7以后的安装方法
  8. 洛谷——P1597 语句解析(两种解法)
  9. 数据结构与算法:十大排序算法之冒泡排序
  10. UVW 在C#中的代码实现