博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
解析Angularjs的$http异步删除数据及实例
阅读量:6159 次
发布时间:2019-06-21

本文共 1952 字,大约阅读时间需要 6 分钟。

这篇文章主要介绍了Angularjs的$http异步删除数据详解及实例的相关资料,这里提供实现思路及实现具体的方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。

Angularjs的$http异步删除数据详解及实例

有人会说删除这东西有什么可讲的,写个删除的service,controller调用一下不就完了。

嗯...看起来是这样,但是具体实现起来真的有这么简单吗?首先有以下几个坑
怎么确定数据是否删除成功?
怎么同步视图的数据库的内容?
1.思路

1.实现方式一

删除数据库中对应的内容,然后将$scope中的对应的内容splice

2.实现方式二

删除数据库中对应的内容,然后再reload一下数据(也就是再调用一次查询方法,这种消耗可想而知,并且还要保证先删除数据再查询)

2.具体实现方式

删除数据的service:用异步,返回promise

service('deleteBlogService',//删除博客    ['$rootScope',      '$http',      '$q',      function ($rootScope, $http, $q) {        var result = {};        result.operate = function (blogId) {          var deferred = $q.defer();          $http({            headers: {              'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'            },//欢迎加入前端全栈开发交流圈一起学习交流:864305860            url: $rootScope.$baseUrl + "/admin/blog/deleteBlogById",            method: 'GET',            dataType: 'json',            params: {              id: blogId            }          })            .success(function (data) {              deferred.resolve(data);              console.log("删除成功!");            })            .error(function () {              deferred.reject();              alert("删除失败!")            });          return deferred.promise;        };        return result;      }])//欢迎加入前端全栈开发交流圈一起学习交流:864305860

controller里面注意事项

要特别注意执行顺序:确保己经删除完成之后再去reload数据,不然会出来视图不更新

/**        * 删除博客        */       $scope.deleteBlog = function (blogId) {         var deletePromise = deleteBlogService.operate(blogId);         deletePromise.then(function (data) {           if (data.status == 200) {             var promise = getBlogListService.operate($scope.currentPage);             promise.then(function (data) {               $scope.blogs = data.blogs;               $scope.pageCount = $scope.blogs.totalPages;             });//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860           }//面向1-3年前端人员         });//帮助突破技术瓶颈,提升思维能力       };

结语

感谢您的观看,如有不足之处,欢迎批评指正。

转载地址:http://gnsfa.baihongyu.com/

你可能感兴趣的文章
一次关于cisco的portfast网络故障
查看>>
老司机开车了
查看>>
我的友情链接
查看>>
核密度图
查看>>
Linux应用:FTP
查看>>
Linux命令:iptables网络防火墙
查看>>
第三章 爱的表达
查看>>
获取SQL SERVER某个数据库中所有存储过程的参数
查看>>
在Linux下编译安装Apache2(2)
查看>>
Method Swizzling 处理一类简单的崩溃
查看>>
AngularJS学习!
查看>>
在Eclipse中搭建Python Django
查看>>
struts国际化
查看>>
Laravel 5.0 - Middleware (中间件)
查看>>
文件特殊权限及facl
查看>>
我的友情链接
查看>>
Android按两次返回键退出应用
查看>>
第一章:认识Redhat Linux
查看>>
文本查看指令
查看>>
我的友情链接
查看>>