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


Posted in Javascript onJuly 27, 2017

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'
            },
            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;
      }])

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;
              });
            }
          });
        };

以上就是Angularjs的$http异步删除数据的实例详解,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
一段批量给页面上的控件赋值js
Jun 19 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
ES10 特性的完整指南小结
Mar 04 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 #Javascript
Angularjs的键盘事件的绑定
Jul 27 #Javascript
Angularjs 事件指令详细整理
Jul 27 #Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 #Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 #Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 #Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 #Javascript
You might like
PHP注释实例技巧
2008/10/03 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
PHP7 list() 函数修改
2021/03/09 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
Python贪吃蛇游戏编写代码
2020/10/26 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
python hashlib加密实现代码
2019/10/17 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
酒店管理自荐信
2013/10/23 职场文书
男方父母证婚词
2014/01/12 职场文书
委托公证书范本
2014/04/03 职场文书
团委竞选演讲稿
2014/04/24 职场文书
六一儿童节开幕词
2015/01/29 职场文书
金陵十三钗观后感
2015/06/04 职场文书
运动会广播稿200字
2015/08/19 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android