ajax嵌套ajax的坏处,promise解决ajax的多重嵌套
这是最近做点一个用户点赞的功能代码,思路:
获取当前点击的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的多重嵌套相关推荐
- jsonp解决ajax跨域问题,用JSONP解决ajax跨域问题
JSONP:JSON With Padding 要点: 1.script标签 2.用script标签加载资源是没有跨域问题的 概要: 在资源加载进来之前先定义一个函数,这个函数接受一个参数(数据),函 ...
- ajax传输json数据格式乱码_解决Ajax加载JSon数据中文乱码问题
一.问题描述 使用zTree的异步刷新父级菜单时,服务器返回中文乱码,但项目中使用了SpringMvc,已经对中文乱码处理,为什么还会出现呢? 此处为的异步请求的配置: Java代码 async: { ...
- ajax如何传超长字符串_解决ajax超长字符串、中文乱码问题
在最近的项目测试中发现通过ajax发送超长参数时遇到这个脚本错误: 系统找不到指定资源 the system cannot locate the resource specified 意思是参数太长, ...
- $.ajax 加了headers报错_Springboot解决Ajax跨域的三种方式
这篇文章不华丽,但比较实用,能解决不少大家实际业务中的问题.大家可以收藏起来,以备用时之需! 1.同源策略 1.1 含义 ajax出现请求跨域错误问题,主要原因就是因为浏览器的"同源策略&q ...
- Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案)
这篇文章主要介绍了用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案),需要的朋友可以参考下 问题 前端小同学在做页面的时候,犯了个常见的错误:把多个Ajax请求顺序着写下来了, ...
- 为什么要用promise处理ajax,用promise.all解决ajax异步循环请求问题
Promise.all() 并不能解决循环的问题,一般情况下 .all() 的参数是 Promise 数组(暂时不考虑其它类似).那么,数组中的每个 Promise 都代表着一个异步操作,Promis ...
- promise ajax 队列,ES6中的promise,从使用promise封装ajax说起
1为啥要用promise? js是单线程的,理论上所有代码都是同步的,从上到下一行行执行.然而就这样傻傻解析运行js的话,碰到较重的任务时,会阻塞进程,如发送一个用户是否登录验证请求,请求完成响应之前 ...
- promise将ajax变为同步,ES6-Promise改造异步请求为同步
1.扩展:ajax 1.1 代码如下 $.ajax({ url:'地址', type:'get/post', data:{}, dataType:'json/jsonp', success:funct ...
- ajax封装,promise封装ajax,axios封装
一.概念 ajax: 核心XMLHttpRequest ,在不重新加载整个页面的情况下更新部分数据 promise: 承诺,只有三种模式( pending:执行状态.fulfilled:已成功.rej ...
最新文章
- CMake 指定安装目录
- 面向函数范式编程(Functional programming)
- 关联tomcat源代码
- Linux下的RTC子系统
- ESP8266等模块
- 关于Docker官方CentOS镜像无法启动mysqld的总结
- mysql ssd优化_mysql ssd 优化
- Qt工作笔记-两种方法从容器中筛选出父类和子类(继承法、typeid法)
- 【C、C++】ctype.h、cctype中的isnumber()函数和isdigit()函数的区别
- TP5.x——update更新成功但是返回是0
- 也来说说C#异步委托
- 四元素与欧拉角之间的转换
- Android显示shp文件,Arcgis for Android移动平台能直接打开本地的shp文件吗
- Servlet运行原理(Tomcat为例)
- Tempo数据分析平台,助力企业高效完成数据预处理工作
- 苹果mac启动台变成问号_MAC开机停止响应并出现闪烁问号的解决方法
- 精选1000个机械原理动图
- 移动端 设计师设计APP UI常用软件总结
- 软考常考的四种设计模式
- ps彩色照片变黑白照片
热门文章
- 如何为iPhone 5屏幕分辨率开发或迁移应用程序?
- 使用getApplication()作为上下文的对话框抛出“无法添加窗口-令牌null不适用于应用程序”
- Spring通过静态方法factory-method或实例工厂factory-bean获取bean对象
- unable to recognize ole stream是什么意思_洞彻状态管理,或者说为什么你永远做不到...
- python http请求_python模拟http请求
- java date eee_java将 Date原始格式EEE MMM dd HH:mm:ss Z yyyy转成指定格式
- 安装mysql后电脑右下角_windows安装mysql方法 mysql5.7以后的安装方法
- 洛谷——P1597 语句解析(两种解法)
- 数据结构与算法:十大排序算法之冒泡排序
- UVW 在C#中的代码实现